在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