Building a dynamic dropdown in javascript

问题

I have 16 uniquely named dropdowns on a web page. When the page loads, the user has the option on any of the dropdowns to select a value of 0 to 16. 0 is the default on all of them. Now, unless the value is 0, when a user selects a value for one of the dropdowns. I want that value to not be an available option for any of the other dropdowns. This continues until you get to the last dropdown where the only options are the last available number and zero. The issue is, it works fine in Chrome and FireFox, but I can't get it to work correctly in IE. Of course, the majority of the users of the page use IE. The workaround being that all values are always available on all dropdowns, and the javascript checks the values on form post.

I attached the code for the function that does the heavy lifting, this function gets called by an onchange event on each of the dropdowns.

 function populatePoints(pointChosen){
     for (var k=1; k< 17; k++){
       pointValue = document.myform["Dropdown_" + k + "_Points"].value
       var theDropDown = document.myform["Dropdown_" + k + "_Points"].options
       theDropDown.remove
       var x = 0
       document.fbpool["Dropdown_" + k + "_Points"].options[x] = new Option(0)
       x++
       for (var i=1;i<17;i++) {
         if (document.myform.Dropdown_1_Points.value != i &&
             document.myform.Dropdown_2_Points.value != i &&
             document.myform.Dropdown_3_Points.value != i &&
             document.myform.Dropdown_4_Points.value != i &&
             document.myform.Dropdown_5_Points.value != i &&
             document.myform.Dropdown_6_Points.value != i &&
             document.myform.Dropdown_7_Points.value != i &&
             document.myform.Dropdown_8_Points.value != i &&
             document.myform.Dropdown_9_Points.value != i &&
             document.myform.Dropdown_10_Points.value != i &&
             document.myform.Dropdown_11_Points.value != i &&
             document.myform.Dropdown_12_Points.value != i &&
             document.myform.Dropdown_13_Points.value != i &&   
             document.myform.Dropdown_14_Points.value != i && 
             document.myform.Dropdown_16_Points.value != i && 
             document.myform.Dropdown_15_Points.value != i){
             document.myform["Dropdown_" + k + "_Points"].options[x] = new Option(i)
             x++}
         }
       document.myform["Dropdown_" + k + "_Points"].value = pointValue
      } 
  }

回答1:

If you want to try a different way, this should work for you. As a bonus, you can have as many selects as you need in the page.

Edited: Fixed if conditional with the OP's help.

function matchValue(collection, value) {
    // We need this to look for a certain value
    // in a collection of values because IE < 9
    // doesn't support .indexOf().
    for (var i = 0; i < collection.length; i++) {
        if (collection[i] == value) {
            return true;
        }
    }

    return false;
}

function populatePoints(pointChosen) {
    // Grab all your selects.
    var sels = document.querySelectorAll('select');
    // The number of selects returned by the query.
    var count = sels.length;
    // Value of the select changed.
    var pointChosenVal = pointChosen.value;
    // Array to keep the current values for all selects.
    var chosenValues = [count];

    for (var i = 0; i < count; i++) { 
        // Keeping the current values.
        chosenValues[i] = sels[i].value;
    }

    for (var i = 0; i < count; i++) {
        // The current value of this select.
        var thisSelVal = sels[i].value;

        // Remove all its options.
        sels[i].options.length = 0;

        // As our selects have an extra option (value = 0),
        // and considering that the number of options = number of selects,
        // we increase the count by 1.
        for (var k = 0; k <= count; k++) {  
            if (k == 0 || 
                (sels[i] == pointChosen && pointChosenVal != 0) || 
                ((sels[i] != pointChosen || pointChosenVal == 0) && (k == thisSelVal || !matchValue(chosenValues, k)))) {
                var opt = document.createElement('option');
                opt.value = k;
                opt.text = k.toString();
                opt.selected = (k == thisSelVal);

                sels[i].add(opt);
            }
        }
    }
}

Note: I've attached the change event handler to the selects like this:

onchange="populatePoints(this)"

Demo

来源：https://stackoverflow.com/questions/25575582/building-a-dynamic-dropdown-in-javascript