在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