javascript - 自动加载下拉菜单选项

Question

我正在尝试将第一个可用选项加载到第三个下拉列表中。

代码如下。

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>

现在的问题是，当我尝试选择第二个下拉菜单“ch2”时，我希望根据我在第二个菜单中所做的选择，在第三个下拉菜单“tb2”中自动加载第一个值。例如，如果我在第一个菜单中选择 C.，在第二个菜单中选择 C，我希望在下一个菜单中已经选择 032010。有什么简单的方法可以做到这一点吗？

Answer 1

我已经对你的代码做了一些修改。但我认为它更具可读性，并且可能更容易扩展到更多表单、类别和选择。

首先这是工作中的 JSFiddle:http://jsfiddle.net/z1sw2bfq/

其次，这是 Fiddle 代码。请参阅评论以了解更多背景信息。

<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>