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

在javascript中构建动态下拉列表

1 个答案: