如何使用JavaScript限制多選列表中選定選項的數量？

我有n選擇框中的選項數量。用戶在選擇框中選擇一個或多個選項並提交表單後，我需要檢查用戶是否未選擇超過四個選項。如何使用JavaScript限制多選列表中選定選項的數量？

我試過如下：

function howMany() { 
    var selObj = document.getElementsByName('xid[]'); 

    var totalChecked = 0; 

    for (i = 0; i < selObj.options.length; i++) { 
     if (selObj.options[i].selected) { 
      totalChecked++; 
     } 
    } 
    if (totalChecked > 4) { 
     alert("You can't check more than 4 options"); 
     return false; 
    } 
    return true; 
}

來源

2009-07-20 Murugesh

多選是一個相當討厭的用戶界面，很多用戶都有困難。我建議改爲複選框組。 – Quentin 2009-07-20 13:16:28

-1

如果它是一個簡單的JavaScript ..在這裏你去。

<pre> 
<html> 
    <script> 
     function howMany() { 
       var selObj = document.getElementById('paramid[]'); 
       var totalChecked = 0; 
       for (i = 0; i < selObj.options.length; i++) { 
        if (selObj.options[i].selected) { 
         totalChecked++; 
        } 
       } 
       alert(totalChecked); 
       if (totalChecked > 4) { 
        alert("You can't check more than 4 options"); 
        return false; 
       } 
       return true; 
     } 
     function testSubmit() { 
      return howMany(); 
     } 
    </script> 
    <body> 
     <form action="http://google.com"> 
      <select name="paramid[]" id="paramid[]" multiple> 
       <option>TEST1</option 
       <option>TEST2</option 
       <option>TEST3</option 
       <option>TEST4</option 
       <option>TEST5</option 
       <option>TEST6</option 
       <option>TEST7</option 
      </select> 
      <input type="submit" onclick="return testSubmit()" name="s" value=" How Many " id="s"/> 
     </form> 
    </body> 
</html> 
</pre>

來源

2009-07-20 13:22:14 kadalamittai

你的格式化被破壞了，你可能應該提到這需要修改HTML（你也應該修改它，所以它不需要修改HTML以使其無效，[並且]不允許在ID屬性中使用在HTML中）。 – Quentin 2009-07-20 13:26:32

的線索是在你們所說的第一個DOM對象的名字：得到元素綽號

這將返回所有與元素的節點列表名稱。你想從列表中剪下第一個。

 var selObj = document.getElementsByName('paramid[]')[0];

更重要的是，而不是通過整個文檔搜索：

 var selObj = myForm.elements['paramid[]']

＆hellip;其中myForm是對錶單的引用（如果您將此函數用作提交事件處理程序，則可以從this獲得該表單）。

來源

2009-07-20 13:15:11 Quentin

如何使用JavaScript限制多選列表中選定選項的數量？

回答

相關問題