Javascript 多重选择限制选择的数量

我希望用户从多个选择选项中最多选择三个选项。到目前为止，我尝试了以下代码：

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
    <option value="2">Bungee Jumping</option>
    <option value="3">Camping</option>
    <option value="5">Mountain Biking</option>
    <option value="6">Rappelling</option>
    <option value="7">Rock Climbing / Bouldering</option>
    <option value="8">Skiing</option>
    <option value="10">Wild Life (Safari)</option>
    <option value="11">Canoeing &amp; Kayaking</option>
    <option value="12">Rafting</option>
    <option value="13">Sailing</option>
    <option value="14">Scuba Diving</option>
    <option value="15">Snorkeling</option>
    <option value="16">Surfing</option>
    <option value="18">Hang Gliding</option>
    <option value="19">Hot-air Ballooning</option>
    <option value="20">Micro-light Aircrafts</option>
    <option value="21">Paragliding</option>
    <option value="22">Paramotoring</option>
    <option value="23">Parasailing</option>
    <option value="24">Skydiving / Parachuting</option>
    <option value="25">Zip-line / Flying Fox</option>
    <option value="26">Caving</option>
    <option value="27">Cycling</option>
    <option value="28">Fishing &amp; Angling</option>
    <option value="29">Motorbike trips</option>
    <option value="30">Nature Walks</option>
    <option value="31">Road Trips</option>
    <option value="32">Zorbing</option>
    <option value="33">Trekking Hiking and Mountaineering</option>
    <option value="34">Backpacking</option>
    <option value="61">Water</option>
</select>

javascript代码：

<script type="text/javascript">
$("select").change(function() {
    if ($("select option:selected").length > 3) {
        $(this).removeAttr("selected");
        alert('You can select upto 3 options only');
    }
});
</script>

当选择3个以上选项时，此代码显示警报框，但仍允许在警报框出现时访问选择第4、第5、第6等选项。如何验证这一点？

您正在使用此内部更改事件，它是选择的参考

试试这个：

$("select").on('click', 'option', function() {
    if ($("select option:selected").length > 3) {
        $(this).removeAttr("selected");
        // alert('You can select upto 3 options only');
    }
});

演示：

编辑

演示：

试试这个

$("select").change(function() {
    if($("select option:selected").length > 3) { 
     alert('You can select upto 3 options only');
     $(this).removeAttr("selected");
  }

});

试试这个

试试这个

检查长度并在达到最大选择后取消选择

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
    <option value="2">Bungee Jumping</option>
    <option value="3">Camping</option>
    <option value="5">Mountain Biking</option>
    <option value="6">Rappelling</option>
    <option value="7">Rock Climbing / Bouldering</option>
    <option value="8">Skiing</option>
    <option value="10">Wild Life (Safari)</option>
    <option value="11">Canoeing &amp; Kayaking</option>
    <option value="12">Rafting</option>
    <option value="13">Sailing</option>
    <option value="14">Scuba Diving</option>
    <option value="15">Snorkeling</option>
    <option value="16">Surfing</option>
    <option value="18">Hang Gliding</option>
    <option value="19">Hot-air Ballooning</option>
    <option value="20">Micro-light Aircrafts</option>
    <option value="21">Paragliding</option>
    <option value="22">Paramotoring</option>
    <option value="23">Parasailing</option>
    <option value="24">Skydiving / Parachuting</option>
    <option value="25">Zip-line / Flying Fox</option>
    <option value="26">Caving</option>
    <option value="27">Cycling</option>
    <option value="28">Fishing &amp; Angling</option>
    <option value="29">Motorbike trips</option>
    <option value="30">Nature Walks</option>
    <option value="31">Road Trips</option>
    <option value="32">Zorbing</option>
    <option value="33">Trekking Hiking and Mountaineering</option>
    <option value="34">Backpacking</option>
    <option value="61">Water</option>
</select>

    <script type="text/javascript">


        $(document).ready(function() {

          var last_valid_selection = null;

          $('#userRequest_activity').change(function(event) {

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

              $(this).val(last_valid_selection);
            } else {
              last_valid_selection = $(this).val();
            }
          });
        });
        </script>

---

演示：

一旦用户选择了最大限制，您可以禁用未选择的选项，并在总选择计数低于最大限制时再次启用这些选项

这是示例代码

函数maxAllowedMultiselectobj，maxAllowedCount{ var selectedOptions=jQuery+obj.id+option[value！=\'\'\']：选中； 如果选择Options.length>=maxAllowedCount{ 如果选择Options.length>maxAllowedCount{ 选择Options.eachFunction i{ 如果i>=maxAllowedCount{ jQuerythis.propselected，false； } }; } jQuery+obj.id+'选项[value！=\'\']'。未：选中。propdisabled，true； }否则{ jQuery+obj.id+'option[value！=\'\']'.propdisabled，false； } } 蹦极 露营 山地自行车 攀岩 攀岩/抱石 滑雪 野生动物狩猎 皮划艇及；皮艇运动 漂流 航行

---

检查这里：@Tushar这在jsfiddle中运行良好，但在我的本地主机上不工作……为什么会有这样的想法？这允许用户选择所有选项现在工作正常…无论用户选择了多少选项，现在只显示三个选项您的编辑示例工作正常。前一个有一些问题。谢谢分享！不起作用……它也有同样的问题。允许用户在此对话框中选择3个以上选项also@Anonymus你现在可以检查一下吗？我需要在代码之前包含jquery 1.9.2文件吗？@Anonymus，我可以知道你使用的是哪个jquery版本吗。jquery版本1.11.0是的，你可以这样做，不需要包含jquery 1.9.2我发布我的答案检查一下，如果不知道，请告诉我，您可以使用.attr在下拉列表中设置一个自定义属性，然后在.change中检索该属性，而不仅仅是设置一个JS变量。这很好，如果你有多个下拉列表需要这个限制，这会很有帮助。如果没有一个和格式，这是可行的吗？例如，当单击时，只有一个类应用于它们的常规DIV？例如，一个“active”类可以直观地将它们显示为active？这是最简单的实现！凉的

$("select option").click(function() {
    if ($("select option:selected").length > 3) {
        $(this).removeAttr("selected");
        alert('You can select upto 3 options only');
    }
});

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
    <option value="2">Bungee Jumping</option>
    <option value="3">Camping</option>
    <option value="5">Mountain Biking</option>
    <option value="6">Rappelling</option>
    <option value="7">Rock Climbing / Bouldering</option>
    <option value="8">Skiing</option>
    <option value="10">Wild Life (Safari)</option>
    <option value="11">Canoeing &amp; Kayaking</option>
    <option value="12">Rafting</option>
    <option value="13">Sailing</option>
    <option value="14">Scuba Diving</option>
    <option value="15">Snorkeling</option>
    <option value="16">Surfing</option>
    <option value="18">Hang Gliding</option>
    <option value="19">Hot-air Ballooning</option>
    <option value="20">Micro-light Aircrafts</option>
    <option value="21">Paragliding</option>
    <option value="22">Paramotoring</option>
    <option value="23">Parasailing</option>
    <option value="24">Skydiving / Parachuting</option>
    <option value="25">Zip-line / Flying Fox</option>
    <option value="26">Caving</option>
    <option value="27">Cycling</option>
    <option value="28">Fishing &amp; Angling</option>
    <option value="29">Motorbike trips</option>
    <option value="30">Nature Walks</option>
    <option value="31">Road Trips</option>
    <option value="32">Zorbing</option>
    <option value="33">Trekking Hiking and Mountaineering</option>
    <option value="34">Backpacking</option>
    <option value="61">Water</option>
</select>

    <script type="text/javascript">


        $(document).ready(function() {

          var last_valid_selection = null;

          $('#userRequest_activity').change(function(event) {

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

              $(this).val(last_valid_selection);
            } else {
              last_valid_selection = $(this).val();
            }
          });
        });
        </script>