<select> 最大限制选择例如 5 个答案

【问题标题】：<select> max limit pick for example 5 of them<select> 最大限制选择例如 5 个
【发布时间】：2015-10-16 08:25:49
【问题描述】：

我想添加选项限制.. 就像有 5 个选项一样。 "您只能选择其中任意 5 个"

类似：

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

当您选择其中“5”个选项时，其他选项将被禁用..

【问题讨论】：

stackoverflow.com/questions/4135210/html-multiselect-limit

标签： javascript jquery html

【解决方案1】：

您需要在select 元素上设置multiple 属性才能选择多个。

然后，您可以使用 JavaScript 设置一个 onChange 处理程序，以在您选择 5 个元素时禁用（或阻止其他选择）。

http://jsfiddle.net/v33sszgp/1/

HTML

<select multiple data-maxoption="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

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

编辑：

还看到您标记了jQuery，所以，jQuery 版本：

http://jsfiddle.net/v33sszgp/2/

var verified = $();
$('select').change(function() {
  var $current = $('option:checked');
  if ($current.length <= $(this).data('maxoption')) {
      $verified = $current;
  } else {
    $(this).find('option').prop('selected', false);
    $verified.prop('selected', true);
  }
});

【讨论】：

添加了禁用进一步输入的示例
我的页面会有很多选择代码。我正在使用 php.. 你可以为多个选择代码执行此操作吗，例如
是的，您可以将其作为 JavaScript 中的参数读取。更新了答案。

【解决方案2】：

试试这个：

<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

$('select').click(function(e)
{
   var itemSelected = 0;
   $('option:selected').each(function()
   {
       itemSelected++;
   });

   if(itemSelected > 5)
   {
       $('option:selected').eq(5).prop("selected",false);
       alert("You can only select 5 options");
   }
});

小提琴：http://jsfiddle.net/9tvmac08/

【讨论】：