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

时间:2009-07-20 13:10:24

标签: javascript

我在选择框中有 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;
}

2 个答案:

答案 0 :(得分:2)

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

这将返回具有该名称的所有元素的节点列表。你想从列表中删除第一个。

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

更好的是,而不是搜索整个文档:

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

...其中myForm是对表单的引用(如果您将此函数用作提交事件处理程序,则可以从this获取)。

答案 1 :(得分:-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>