如何使用JavaScript限制多选列表中选定选项的数量？

Question

我在选择框中有n个选择。 用户在选择框中选择一个或多个选项并提交表单后，我需要检查用户选择的选项是否超过四个。

我尝试了以下方法：

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;
}

Answer 1

线索在您调用的第一个DOM对象的名称中：get Elements ByName

这将返回具有该名称的所有元素的节点列表。 您要剪掉列表中的第一个。

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

更好的是，与其搜索整个文档，不如：

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

...其中myForm是形式（其中，你可以从得到一个参考this ，如果你使用该功能作为一个提交事件处理程序）。

Answer 2

如果它是一个简单的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>

如何使用JavaScript限制多选列表中选定选项的数量？

问题描述

2 个解决方案

解决方案1
2 2009-07-20 13:15:11

解决方案2
-1 已采纳 2009-07-20 13:22:14

如何使用JavaScript限制多选列表中选定选项的数量？

问题描述

2 个解决方案

解决方案1 2 2009-07-20 13:15:11

解决方案2 -1 已采纳 2009-07-20 13:22:14

解决方案1
2 2009-07-20 13:15:11

解决方案2
-1 已采纳 2009-07-20 13:22:14