Automatically Load the option to drop down menu

Question

I am trying to load the first available option to the third drop-down.

The code is as below.

var categories = [];
categories["startList"] = ["C.","C#.","D.","Eb.","E.","F.","F#.","G.","Ab.","A.","Bb.","B."];                   // Level 1

 categories["C."] = ["C","C7","Cm","Cm7","Cmaj7","Csus4","Caug","Cdim"];
   categories["C"] = ["032010","335553","133211","543210",""];

var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){
  var step = Number(currList.name.replace(/\D/g,""));
  for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
  }
  var nCat = categories[currCat];
  for (each in nCat)    {
    var nOption = document.createElement('option');
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption);
  }
}

function init() { fillSelect('startList',document.forms[0]['List1']);
                   fillSelect('startList',document.forms[0]['List4']);
                fillSelect('startList',document.forms[0]['List7']);


 }

navigator.appName == "Microsoft Internet Explorer"
       ? attachEvent('onload', init, false)
       : addEventListener('load', init, false); 


function getValues() {
   var str = '';
   for(i = 1; i < 6; i++)  {
  document.createElement('select')
  str += document.getElementById('List' + i).value+'\n';
  document.getElementById('creation').innerHTML="";    }

}

<select name='List4' id="List4" onchange="fillSelect(this.value,this.form['ch2'])"><option selected></option></select>
<select name='ch2' id="ch2" onchange="fillSelect(this.value,this.form['tb2'])"><option selected></option></select>
<select name='tb2' id="tb2"><option selected></option></select>
<input id="f2" type="text" size="1" value=1 class=copystuff>
<button onclick="do2()">Do2</button><br>

Now the problem is that when I try to select the second drop down menu "ch2", I want the first value to be loaded automatically in the third dropdown "tb2" according to the selection that I make in the second menu. For eg, if I select C. in the first menu, C in the second menu, I want 032010 to be already selected in the next menu. Is there any simple way to do this?

Answer 1

I have changed your code up a good bit. But I think it's a bit more readable, and may be easier to extend to more forms, categories, and selects.

First here is the working JSFiddle: http://jsfiddle.net/z1sw2bfq/

Second, here is the Fiddle code. Please see the comments for additional context.

<script>
//create a blank object to hold the select lists
var lists = { };

//create an object to hold the categories text arrays
var categories = {
    "startList": ["C.","C#.","D.","Eb.","E.","F.","F#.","G.","Ab.","A.","Bb.","B."], // Level 1
    "C.": ["C","C7","Cm","Cm7","Cmaj7","Csus4","Caug","Cdim"],
    "C": ["032010","335553","133211","543210",""]
};

function init() { 
    //load the SELECT element from the form into lists
    //Get all of the selects in forms[0]...
    var selects = document.forms[0].getElementsByTagName("select");
    for (var i in selects) {
        //...and load those into lists.
        lists[selects[i].id] = selects[i];
        //Ex: creates a property like "lists.List4" also referenced by "list['List4']") 
        // which equals the select element with id List4
    }

    //enter the list name and the select id
    fillSelect('startList', 'List4');
}

function fillSelect(currCatName, currListName){
    //get the category
    var cat = categories[currCatName];

    //verify the category is valid
    if (cat) {
        //get the select
        var select = lists[currListName];

        //verify the select is valid
        if (select) {
            //clear the select
            for (var i = select.options.length-1; i>=0; i--)
                select.remove(i);

            //check the data-first attribute
            var datafirst = select.getAttribute("data-first");
            if (datafirst == "blank") {
                var opt = document.createElement('option');
                opt.value = "";
                opt.text = "";
                select.add(opt);
            }

            //load the select
            for (var j in cat) {
                var opt = document.createElement('option');
                opt.value = cat[j];
                opt.text = cat[j];
                select.add(opt);
            }
        }
    }
}

//best to use feature detection instead of browser detection
if (window.attachEvent) 
    window.attachEvent('onload', init, false);
else
    window.addEventListener('load', init, false); 
</script>

<form action="#" method="get">
    <!--
    I added a "data-first" attribute to the selects. This will be used to determine if the
    first option in the select is a blank or the first item in the list.
    -->
    <select name='List4' id="List4" onchange="fillSelect(this.value,'ch2')" data-first="blank"></select>
    <select name='ch2' id="ch2" onchange="fillSelect(this.value,'tb2')" data-first="blank"></select>
    <select name='tb2' id="tb2" data-first="first"></select>
</form>