HTML多选限制

Haf*_*mri 16 html select limit

是否可以设置多重选择限制?

下面是一个示例代码,用户可以选择多个值.

<select multiple="multiple" name="choose">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
</select>
Run Code Online (Sandbox Code Playgroud)

但是,如何限制用户选择不超过3个值.任何的想法?

Ale*_*kov 15

你可以使用jQuery

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          //your code here
      }
  });
Run Code Online (Sandbox Code Playgroud)

  • 我在这里看不到有人要求jQuery解决方案...... (11认同)

Red*_*ter 6

您可以通过客户端上的javascript执行此操作,然后在服务器端添加检查以防客户端禁用javascript.

这里有一些基本的客户端代码可以给你一个想法:

<html>
    <body>
        <form onsubmit="validate()">
            <select multiple="multiple" id="choose" name="choose"> 
                <option value="1">Value 1</option> 
                <option value="2">Value 2</option> 
                <option value="3">Value 3</option> 
                <option value="4">Value 4</option> 
                <option value="5">Value 5</option> 
                <option value="6">Value 6</option> 
            </select><br>
            <input type="submit">
        </form>
        <script>
        function validate()
        {
            var selectChoose = document.getElementById('choose');
            var maxOptions = 2;
            var optionCount = 0;
            for (var i = 0; i < selectChoose.length; i++) {
                if (selectChoose[i].selected) {
                    optionCount++;
                    if (optionCount > maxOptions) {
                        alert("validation failed, not submitting")
                        return false;
                    }
                }
            }
            return true;
        }
        </script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)