& lt; select>举个例子，最大限制选择5个

<select> max limit pick for example 5 of them

本文关键字：5个 选择 select lt      更新时间：2023-09-26

我想添加选项限制…就像有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"时，其他选项将被禁用…

您需要在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>

JS 

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

试试这个:

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

相关文章：