javascript - 在 JavaScript 中构建动态下拉菜单

Question

我在网页上有 16 个唯一命名的下拉菜单。加载页面时，用户可以在任何下拉列表中选择 0 到 16 之间的值。0 是所有下拉列表的默认值。现在，除非该值为 0，否则当用户为其中一个下拉列表选择一个值时。我希望该值不成为任何其他下拉菜单的可用选项。这一直持续到您到达最后一个下拉列表，其中唯一的选项是最后一个可用数字和零。问题是，它在 Chrome 和 FireFox 中工作正常，但我无法让它在 IE 中正常工作。当然，该页面的大多数用户使用 IE。解决方法是所有值在所有下拉菜单中始终可用，并且 javascript 检查表单发布上的值。

我附加了执行繁重工作的函数的代码，该函数由每个下拉菜单上的 onchange 事件调用。

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

Answer 1

如果您想尝试不同的方式，这应该适合您。作为奖励，您可以在页面中选择任意数量的选项。

编辑:如果有条件，请在OP的帮助下修复。

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);
            }
        }
    }
}

注意:我已将更改事件处理程序附加到选择，如下所示:

onchange="populatePoints(this)"

Demo