Question

我想添加选项限制..就像有一个5选项。 “你只能选择他们中的任何一个” 就像是：＆LT;选择＆GT; ＆lt; option value =“1”＆gt; 1＆lt; / option＆gt; ＆lt; option value =“2”＆gt; 2＆lt; / option＆gt; ＆lt; option value =“3”＆gt; 3＆lt; / option＆gt; ＆lt; option value =“4”＆gt; 4＆lt; / option＆gt; ＆lt; option value =“5”＆gt; 5＆lt; / option＆gt; ＆lt; option value =“6”＆gt; 6＆lt; / option＆gt; ＆lt; option value =“7”＆gt; 7＆lt; / option＆gt; ＆LT; /选择＆GT; 当你选择例如“5”时，其他选项将被禁用..

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

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

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

<select> max limit pick，例如5个

2 个答案: