Home » Html » Populate one dropdown based on selection in another

Populate one dropdown based on selection in another

Posted by: admin November 30, 2017 Leave a comment


I need to change the contents of dropdown B based on the selection in dropdown A using javascript. There are no db queries involved–I know beforehand what the contents of B should be given the choice in A. I have found some examples using AJAX, but since there is no db query involved that’s not necessary. Can anyone point me to some example code for how to do this?

<script type="text/javascript">
     function configureDropDownLists(ddl1,ddl2) {
    var colours = ['Black', 'White', 'Blue'];
    var shapes = ['Square', 'Circle', 'Triangle'];
    var names = ['John', 'David', 'Sarah'];

    switch (ddl1.value) {
        case 'Colours':
            ddl2.options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(ddl2, colours[i], colours[i]);
        case 'Shapes':
            ddl2.options.length = 0; 
        for (i = 0; i < shapes.length; i++) {
            createOption(ddl2, shapes[i], shapes[i]);
        case 'Names':
            ddl2.options.length = 0;
            for (i = 0; i < names.length; i++) {
                createOption(ddl2, names[i], names[i]);
                ddl2.options.length = 0;


    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;

And then call it like this:

<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>

<select id="ddl2">


Setup mine within a closure and with straight JavaScript, explanation provided in comments

(function() {

  //setup an object fully of arrays
  //alternativly it could be something like
  //{"yes":[{value:sweet, text:Sweet}.....]}
  //so you could set the label of the option tag something different than the name
  var bOptions = {
    "yes": ["sweet", "wohoo", "yay"],
    "no": ["you suck!", "common son"]

  var A = document.getElementById('A');
  var B = document.getElementById('B');

  //on change is a good event for this because you are guarenteed the value is different
  A.onchange = function() {
    //clear out B
    B.length = 0;
    //get the selected value from A
    var _val = this.options[this.selectedIndex].value;
    //loop through bOption at the selected value
    for (var i in bOptions[_val]) {
      //create option tag
      var op = document.createElement('option');
      //set its value
      op.value = bOptions[_val][i];
      //set the display label
      op.text = bOptions[_val][i];
      //append it to B
  //fire this to update B on load

<select id='A' name='A'>
  <option value='yes' selected='selected'>yes
  <option value='no'> no
<select id='B' name='B'>


Could you please have a look at: http://jsfiddle.net/4Zw3M/1/.

Basically, the data is stored in an Array and the options are added accordingly. I think the code says more than a thousand words.

var data = [ // The data
    ['ten', [
    ['twenty', [
        'twentyone', 'twentytwo'

$a = $('#a'); // The dropdowns
$b = $('#b');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       data("sel", i).

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][1]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). // Add options
           data("sel", j).
}).change(); // Trigger once to add options at load of first choice