Javascript <；选择>；最大限值选择示例5

我想增加选项的限制。。好像有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>

1.
2.
3.
4.
5.
6.
7.

例如，当您选择其中的“5”个时，其他选项将被禁用。

您需要在

select

元素上设置属性，以便选择多个

然后，使用JavaScript，您可以设置

onChange

处理程序，在选择了5个元素后禁用该元素（或阻止其他选择）

HTML

试试这个：

<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");
   }
});

1.
2.
3.
4.
5.
6.
7.
$（“选择”）。单击（函数（e）
{
var itemSelected=0；
$（'option:selected'）。每个（函数（）
{
项目选择++；
});
如果（项目选择>5）
{
$（'option:selected'）.eq（5）.prop（“selected”，false）；
警报（“您只能选择5个选项”）；
}
});

---

Fiddle:

添加了禁用进一步输入的示例。我的页面中将有许多选择代码。我正在使用php。。你能为多个选择代码这样做吗。。我知道这是可行的，但我不知道怎么做……是的，你可以把它作为JavaScript中的一个参数来读。更新答案。

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;
    });
  }
}

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);
  }
});

<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");
   }
});