如何限制 HTML 中选择的选项数量元素？

Question

我正在制作的表单中使用 元素，该元素允许进行多项选择，但我想将最大选择数量限制为 10。使用 JavaScript 或 jQuery 可以吗？

Answer 1

这是一些完整的代码供您使用：

$(document).ready(function() {

  var last_valid_selection = null;

  $('#testbox').change(function(event) {
    if ($(this).val().length > 5) {
      alert('You can only choose 5!');
      $(this).val(last_valid_selection);
    } else {
      last_valid_selection = $(this).val();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select multiple id="testbox" size="10">
  <option value='1'>First Option</option>
  <option value='2'>Second Option</option>
  <option value='3'>Third Option</option>
  <option value='4'>Fourth Option</option>
  <option value='5'>Fifth Option</option>
  <option value='6'>Sixth Option</option>
  <option value='7'>Seventh Option</option>
  <option value='8'>Eighth Option</option>
  <option value='9'>Ninth Option</option>
  <option value='10'>Tenth Option</option>
</select>

Answer 2

这会将用户限制为 3 个选项：

$("select").on("click", "option", function () {
    if ( 3 <= $(this).siblings(":selected").length ) {
        $(this).removeAttr("selected");
    }
});​​​​​​​​​​

小提琴：http://jsfiddle.net/2GrYk/

Answer 3

这个答案适用于这些情况：

• 正常单击
• 仅 mousedown （鼠标在 mouseup 之前移出）
• 键盘
• 如果有具有相同值的不同选项

代码：

$('#mySelect').on('change', function() {
    if (this.selectedOptions.length < 4) {
        $(this).find(':selected').addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

演示

或者，对于不支持 selectedOptions 的旧浏览器，

$('#mySelect').on('change', function() {
    var $sel = $(this).find(':selected');
    if ($sel.length < 4) {
        $sel.addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

演示

Answer 4

使用 jQuery，您可以将一个函数附加到更改事件，并且由于它是多重选择，因此 val() 将是一个数组。您始终可以检查数组的长度，如果其大小是预定义的，则执行某些操作。以下代码演示了如何知道选择了多少个项目。

  $("#select").change(function(){
        alert($(this).val().length);
  });   

Answer 5

想通了！这是生成的代码：

$(document).ready(function(){

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){

    if ($(this).val().length > 10) {

        alert('You can only choose 10!');
        $(this).val(last_valid_selection);

    } else {

        last_valid_selection = $("#recipient_userid").val();

        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });

        $("#currentlySelected").html(selected);
        selected = "";
    }

}).change();
});

感谢大家的帮助！

Answer 6

我基本上合并了几个提供的答案，以制作特定于特定 ID 的内容：

$("#mySelect").on("click", "option", function(){
    var max = 3;
    if ( max <= $(this).siblings(":selected").length ) {
        alert("Only " + max + " selections allowed.");
        $(this).removeAttr("selected");
    }
});

Rob

Answer 7

你可以使用 jQuery

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

Answer 8

这是一个纯粹的 JavaScript 示例，基于 jilu 的示例。

const selectEls = document.querySelectorAll('select[multiple]');

selectEls.forEach((selectEl) => {
    selectEl.addEventListener('change', (e) => {

        const currentEl = e.currentTarget;

        let is = 0;
        for (let i = 0; i < currentEl.length; i++) {
            if (currentEl.options[i].selected) {
                is++;
            }
            if (is > 3) { // if you want more than 3 selected options, change the number here
                currentEl.options[i].selected = false;
            }
        }

    })
});

Answer 9

瞧！
不需要 Jquery。

    var is = 0;
    for (var i = 0; i < selectCountryCode.length; i++) {
        if (selectCountryCode.options[i].selected) {
            is++;
        }
        if (is > 3) {
            selectCountryCode.options[i].selected = false;              
        }
    }

吉鲁山