Javascript 如何限制在html选择框中选择的选项？

我在一个表单中使用了一个select标记，它允许多个选择，但我希望选择的最大数量不超过10个。使用javascript或jquery可以做到这一点吗

---

提前谢谢

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

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

---

这里有一些完整的代码供您使用…一定要喜欢谷歌AJAX API游乐场：-）

编辑1:注意：这只允许您选择5，因为我不想复制/粘贴其他10个选项：-）

使用jQuery选择最大值示例
load（“jquery”，“1”）；
$（文档）.ready（函数（）{
var last\u valid\u selection=null；
$（'#testbox'）。更改（函数（事件）{
如果（$（this.val（）.length>5）{
警报（'您只能选择5！'）；
$（此）.val（上次有效选择）；
}否则{
last_valid_selection=$（this.val（）；
}
});
});
第一选择
第二种选择
第三种选择
第四种选择
第五种选择
第六种选择
第七种选择
第八种选择
第九种选择
第十种选择

---

​

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

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

$（“选择”）。在（“单击”、“选项”上，函数（）{
如果（3算出了！下面是结果代码：

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

$（文档）.ready（函数（）{
var last\u valid\u selection=null；
var selected=“”；
$（“#收件人_用户ID”）.change（函数（事件）{
如果（$（this.val（）.length>10）{
警报（'您只能选择10！'）；
$（此）.val（上次有效选择）；
}否则{
最后一个有效的选择=$（“#收件人_用户ID”）.val（）；
$（“#收件人_用户ID选项：选中”）。每个（函数（）{
选中+=“
”++$（this.text（）++“
”；
});
$（“#currentlySelected”）.html（选中）；
选定=”；
}
}).change（）；
});

感谢大家的帮助！
您可以使用jQuery

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

我基本上合并了两个提供的答案，以使某个特定ID具有特定性：

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

$（“#mySelect”）。在（“单击”，“选项”，函数（）上{
var max=3；
如果（max此答案在这些情况下有效：


正常点击
仅鼠标向下移动（在鼠标向下移动之前将鼠标移到外部）
键盘
如果存在具有相同值的不同选项

代码：

瞧！
不需要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;              
        }
    }

var=0；
对于（变量i=0；i3）{
选择CountryCode.options[i]。所选值=false；
}
}

Jilusan
这会有很大帮助。有没有一种方法可以取消选择选择框中的所有内容？@tominated-使用jQuery，您只需调用
$（''#myselectbox_id'）.val（null）；
您可以使用：
$（“#select”）.val（[]）
在选择列表中不设置任何选项。这几乎是完美的！如果上次有效的选择是数组，它不会再次选择它。不过，谢谢！我不知道你的意思。如果上次有效的选择是数组，有什么东西不会再次选择它？你可能想将
上次有效的选择
移出全局范围，进入中de>ready
anonymous函数。@贾斯汀·约翰逊（Justin Johnson）-这一点很好。我仍然不清楚什么不起作用。在Chrome中工作得很好（目前无法测试IE）。@Topher，除非你准备好阅读思想，否则不要回答！）欢迎来到StackOverflow，Tominated！好的，我会把它放到contect中。这是一个公司内部的电子邮件表单，自动生成一个包含每个员工姓名的选择框。我正在更新它，这样它会显示您已经选择的姓名（这是一个很长的列表）因此，有一些客户端验证表明您没有选择超过10个名称（显然有服务器端代码来防止这种情况发生）。select标记的id是“recipient\u userid”。我将发布到目前为止我拥有的$（document）.ready（function（）{var last\u valid\u selection=null；$（“#recipient\u userid”）.change（function（event）{var selected=”“；$（“#recipient_userid option:selected”）。每个（函数（）{selected+=“
”++$（this.text（）+“
”；}）；$（“#currentlySelected”）.html（selected）；）更改（）；}）；可能重复的Tominated，这不是论坛。您的贡献应该只存在于原始问题中（你可以随意编辑它）。你应该接受这里提供的许多好答案中的一个。尽管如此，乔纳森是绝对正确的。这个想法是问一个问题，然后选择最好的答案（你这样做甚至会获得一些声誉）。我很少不选择答案，更罕见的是我回答我自己的问题。然而，这个社区是来互相帮助的，我很高兴我们帮助了你们。对不起，伙计们，我不知道这一点。如果我们使用键盘或滑动点击，这将不起作用。这个示例似乎不完整，可能是出于有意，因为从那时起它将涉及jQuery？什么是selectCountryCode？不需要避免jQuery；运行Selectize仍然需要jQuery。
$('#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);
});

$('#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);
});

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