使用Javascript選擇表單中的最大選擇數

Question

我在HTML中使用一些簡單的選擇表單。我使用javascript來限制用戶可以選擇的項目數量。

在HTML我有以下代碼：

<select name="category" multiple id="category" onchange="checkMaxSelected(this, 3, 'Max number of categories you can select: ');"> 
    <option value="orange">orange</option> 
    <option value="apple">apple</option> 
    <option value="banana">banana</option> 
    <option value="pear">pear</option> 
    <option value="strawberry">strawberry</option> 
    </select> 

我通過三個變量來javascript函數checkMaxSelected：

1. 其中選擇形式（即此）
2. 最大的數用戶可以在表單中執行選擇（在我的情況下爲3）
3. 應顯示在警告框中的錯誤消息。

的JS代碼如下：

function checkMaxSelected (select, maxSelected, displ_error_nummaxcat) { 
    if (!select.storeSelections) { 
    select.storeSelections = new Array(select.options.length); 
    select.selectedOptions = 0; 
    } 

    for (var i = 0; i < select.options.length; i++) { 

    console.log('select.options[i].selected: '+select.options[i].selected+' select.storeSelections[i]: '+select.storeSelections[i]); 

    if (select.options[i].selected && 
     !select.storeSelections[i]) { 
     if (select.selectedOptions < maxSelected) { 
     select.storeSelections[i] = true; 
     select.selectedOptions++; 
     } 
     else { 
     alert(displ_error_nummaxcat + maxSelected); 
     console.log('HERE I SHOW ALERT!'); 
    select.options[i].selected = false; 
     } 
    } 
    else if (!select.options[i].selected && 
     select.storeSelections[i]) { 
     select.storeSelections[i] = false; 
     select.selectedOptions--; 
    } 
    } 
}; 

該解決方案下Firefox，Safari和IE完美的作品，但它不適用於Chrome工作。爲什麼？

任何幫助，非常感謝。先謝謝你。

額外的信息：

我一直妄圖用螢火蟲無論是Firefox和Chrome調試它：在Firefox當我選擇的選擇形式我看到這個Firebug控制檯的第一項：

select.options[i].selected: true select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 

（這是正確的）。

與Chrome相同的操作（即選擇第一項）會直接觸發錯誤消息。下面是在Chrome Firebug控制檯輸出：

select.options[i].selected: true select.storeSelections[i]: undefined 
HERE I SHOW ALERT! 
select.options[i].selected: false 
select.options[i].selected: false select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 
select.options[i].selected: false select.storeSelections[i]: undefined 

Answer 1

爲了使你的代碼工作在Chrome的相同，以及其他瀏覽器，你需要將自己的select.selectedOptions財產別的東西。

選擇標記有selectedOptions attribute，只有Chrome的正確得到，它的出現，因此而其他瀏覽器採取財產作爲自己創建的數字財產，Chrome瀏覽器，它實際上是你選擇的選項元素集合，這就是爲什麼你if (select.selectedOptions < maxSelected)聲明失敗。

這是你的固定JavaScript函數：

function checkMaxSelected (select, maxSelected, displ_error_nummaxcat) { 
    if (!select.storeSelections) { 
     select.storeSelections = new Array(select.options.length); 
     select.optionsSelected = 0; 
    } 

    for (var i = 0; i < select.options.length; i++) { 
     console.log('select.options[i].selected: '+select.options[i].selected+' select.storeSelections[i]: '+select.storeSelections[i]); 
     if (select.options[i].selected && !select.storeSelections[i]) { 
      if (select.optionsSelected < maxSelected) { 
       select.storeSelections[i] = true; 
       select.optionsSelected++; 
      } 
      else { 
       alert(displ_error_nummaxcat + maxSelected); 
       console.log('HERE I SHOW ALERT!'); 
       select.options[i].selected = false; 
      } 
     } 
     else if (!select.options[i].selected && select.storeSelections[i]) { 
      select.storeSelections[i] = false; 
      select.optionsSelected--; 
     } 
    } 
}