如何使用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限制多选列表中选定选项的数量？

回答

相关问题