HTML多选限制_Html_Select_Limit - Fatal编程技术网

HTML多选限制

html select

HTML多选限制,html,select,limit,Html,Select,Limit,是否可以将限制设置为multipleselect 下面是一个示例代码，用户可以在其中选择多个值 <select multiple="multiple" name="choose"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> <option v

是否可以将限制设置为multipleselect

下面是一个示例代码，用户可以在其中选择多个值

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


值1
价值2
价值3
价值4
价值5
价值6

但是，如何限制用户选择不超过3个值。

有什么想法吗？

您可以通过客户端的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>


值1
价值2
价值3
价值4
价值5
价值6


函数验证（）
{
var selectChoose=document.getElementById（'choose'）；
var-maxOptions=2；
var optionCount=0；
对于（变量i=0；i最大选项）{
警报（“验证失败，未提交”）
返回false；
}
}
}
返回true；
}

您可以使用jQuery

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

RedFilter使用javascript进行验证的想法是正确的。尚未测试，但您可以执行以下操作：

var options = document.all.tags("option");
var selectedCounter = 0;
    
for (var i=0; i < options.length; i++) {
   if (options[i].selected) {
      selectedCounter++;
   }
   checkCounter();
}

function checkCounter() {
   //disable all options here
}

var options=document.all.tags（“选项”）；
var selectedCounter=0；
对于（变量i=0；i

脚本，该脚本将不允许选择3个以上的元素（而不仅仅是在提交时验证）

var验证=[]；
document.querySelector（'select'）。onchange=function（e）{
if（this.querySelectorAll（'option:checked'））.length-1；
});
}
}

注意，防止在

select

上实际选择该项会带来一些额外的复杂性，相反，它会验证用户的操作，如果该操作无效，则会将其还原。

可能的重复项

var verified = [];
document.querySelector('select').onchange = function(e) {
  if (this.querySelectorAll('option:checked').length <= 3) {
      verified = Array.apply(null, this.querySelectorAll('option:checked'));
  } else {
    Array.apply(null, this.querySelectorAll('option')).forEach(function(e) {
        e.selected = verified.indexOf(e) > -1;
    });
  }
}