定义要从下拉选择 html 中选择的选项数量答案

【问题标题】：Defining the number of options to be selected from dropdown selection html定义要从下拉选择 html 中选择的选项数量
【发布时间】：2014-05-01 00:14:25
【问题描述】：

有没有一种方法可以限制用户可以在如下所示的多选 html 字段中选择的选项数量？

<select multiple id="color" name="color" size=5>
<option>- Choose one -</option>
<option value="blu">Blue</option>
<option value="yel">Yellow</option>
<option value="bla">Black</option>
<option value="ora">Orange</option>
</select>

假设我想“强制”用户从四个选项中选择两个。我该怎么做？

【问题讨论】：

标签： html drop-down-menu dropdownchoice

【解决方案1】：

如果有超过所需的数量，请对它们进行计数，或者当您已经选择了 2 个时，取消选择额外的一个或对列表执行任何您需要的操作（例如禁用它）

小提琴：http://jsfiddle.net/6kMWu/

$('#color > option').on('click', function (e) {
    var selected = ($('#color > option:selected').length);
    console.log(e.target);
    if(selected > 2)
    {
        $(e.target).removeAttr('selected');
        return false;
        e.preventDefault();
    }
});

【讨论】：

【解决方案2】：

可能重复？ HTML Multiselect Limit

如果要选择多个选项，则需要一个数组来处理结果，因此将名称更改为 color[]

<select multiple id="color" name="color[]" size=5>
<option>- Choose one -</option>
<option value="blu">Blue</option>
<option value="yel">Yellow</option>
<option value="bla">Black</option>
<option value="ora">Orange</option>
</select>

但是，对于您真正的问题，我目前没有更多信息

编辑

答案来自：HTML Multiselect Limit 是：

你可以使用 jQuery

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

提交者：infinity

【讨论】：

【解决方案3】：

这可以通过 jQuery 轻松实现：

// Your jQuery which will limit the max selected to 2
$( document ).ready(function() {
    $(".color option").click(function(e){
        if ($(this).parent().val().length > 2) {
            $(this).removeAttr("selected");
        }
    });
});

<!-- Your HTML //-->
<select multiple id="color" name="color[]" class="color" size="5">
    <option>- Choose one -</option>
    <option value="blu">Blue</option>
    <option value="yel">Yellow</option>
    <option value="bla">Black</option>
    <option value="ora">Orange</option>
</select>

【讨论】：