logo标签列表

多选限制选择的数量

javascriptjqueryhtml
19

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

<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等选项并显示警告框。如何验证这一点？

请在此处查看：https://dev59.com/J3I-5IYBdhLWcg3wBjrl#2046293 - Ejaz
7个回答
29

试试这个...

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

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

演示：http://jsfiddle.net/9c3sevuv/

1
我发布了我的答案，请检查并告诉我。 - Deenadhayalan Manoharan
1
对于那些不知道的人，你可以使用.attr()在下拉菜单上设置自定义属性，而不仅仅是设置JS变量，然后在.change()中检索它。这很好，如果你有多个需要这种限制的下拉菜单，它会很有帮助。 - tylerl
这是否可以在没有<select>和<option>格式的情况下完成？例如，只是普通的DIV，在单击时应用一个类？例如，例如一个“active”类，它会在视觉上显示为活动状态？ - dbrree
最简单的实现！酷！ - LINKeRxUA
7
你正在change事件中使用this，这是指向select的引用。
尝试这样做：
$("select").on('click', 'option', function() {
    if ($("select option:selected").length > 3) {
        $(this).removeAttr("selected");
        // alert('You can select upto 3 options only');
    }
});

示例: http://jsfiddle.net/tusharj/tmkzebnj/

编辑

$("select").on('change', function(e) {
    if (Object.keys($(this).val()).length > 3) {
        $('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
    }
});

示例：http://jsfiddle.net/tusharj/tmkzebnj/1/

@Tushar，这在 jsfiddle 上运行良好，但在我的本地主机上却不行...有什么想法吗？这让用户选择所有选项。 - Geetika
现在运作正常...无论用户选择了多少选项，它现在只显示三个选择。 - Geetika
1
你的编辑示例完美地运行了。之前的那个有一些问题。感谢分享！ - tmarois
2

当用户选择了最大限制后，您可以禁用未选中的选项，并在总选择数量低于最大限制时再次启用它们。

以下是示例代码：

    function maxAllowedMultiselect(obj, maxAllowedCount) {
            var selectedOptions = jQuery('#'+obj.id+" option[value!=\'\']:selected");
            if (selectedOptions.length >= maxAllowedCount) {
                if (selectedOptions.length > maxAllowedCount) {
                    selectedOptions.each(function(i) {
                        if (i >= maxAllowedCount) {
                            jQuery(this).prop("selected",false);
                        }
                    });
                }
                jQuery('#'+obj.id+' option[value!=\'\']').not(':selected').prop("disabled",true);
            } else {
                jQuery('#'+obj.id+' option[value!=\'\']').prop("disabled",false);
            }
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userRequest_activity" name="activity[]" onchange="maxAllowedMultiselect(this, 2)" multiple>
  <option value="1">Bungee Jumping</option>
  <option value="2">Camping</option>
  <option value="3">Mountain Biking</option>
  <option value="4">Rappelling</option>
  <option value="5">Rock Climbing / Bouldering</option>
  <option value="6">Skiing</option>
  <option value="7">Wild Life (Safari)</option>
  <option value="8">Canoeing &amp; Kayaking</option>
  <option value="9">Rafting</option>
  <option value="10">Sailing</option>
</select>

1
尝试一下这个Fiddle。
$("select option").click(function() {
    if ($("select option:selected").length > 3) {
        $(this).removeAttr("selected");
        alert('You can select upto 3 options only');
    }
});
我需要在代码之前包含jQuery 1.9.2文件吗？ - Geetika
@匿名用户，可以告诉我你正在使用哪个版本的jQuery吗？ - stanze
jQuery版本1.11.0 - Geetika
可以使用那个，不需要包含jQuery 1.9.2。 - stanze
0

试试这个，它对我有效而且简单，它会显示一个警告并移除一个选定的选项。

<script>
    (function() {
        var x= document.getElementById("select");
        x.addEventListener("click",function() {
            var total = 0;
            for (var i = 0; i < x.options.length; i++) {
                if (x.options[i].selected == true) {
                    total = total + 1
                }
            }
            if (total > 3) {
                alert("please don't select more then 3 options")
                x.options[x.options.selectedIndex].selected=false
            }
        });
    })();
</script>
0

试试这个

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

});

演示

无法工作...它仍然存在相同的问题。在此情况下允许用户选择超过3个选项。 - Geetika
@匿名者 你现在可以检查吗 - Nagaraj S
0

这是我在 Bootstrap 生态系统中构建的自定义解决方案。它将禁用下拉菜单中所有未选择的选项，并在取消选择选项时重新启用它们。

我将其模块化为一个函数，因此您可以轻松地传递自己的标识符。这些循环几乎肯定可以进行优化，但我将其留给读者。

    <select id="my_select" class="selectpicker form-control filter-select modal-filter-dropdown" data-width = "100%" multiple>
      <option class="dropdown-item" href="#">Clear Selected Items</option>
      <option class="dropdown-item" href="#">Another action</option>
      <option class="dropdown-item" href="#">Something else here</option>
      <option class="dropdown-item" href="#">Link 1</option>
      <option class="dropdown-item" href="#">Link 2</option>
      <option class="dropdown-item" href="#">Link 3</option>
      <option class="dropdown-item" href="#">Link 4</option>
      <option class="dropdown-item" href="#">Link 5</option>
      <option class="dropdown-item" href="#">Link 6</option>
      <option class="dropdown-item" href="#">Link 7</option>
    </select> 

    <script type='text/javascript'>
      $(document).ready(function() {

        selectWithLimit("#my_select", 3);

        function selectWithLimit(selector, selection_limit) {
          let num_selected = 0;

          // count number of selected options
          $(selector).change(function(event) {
            $(selector + ' option').each(function() {
              if($(this).is(':selected')) {
                num_selected++;
              }
            });

            // disable each option that is not selected if we're over the limit
            if (num_selected >= selection_limit) {
              $(selector + ' option').each(function() {
                if (!$(this).is(':selected')) {
                  if ($(this).val() != "Clear Selected Items") { 
                    $(this).prop("disabled", true);
                  }
                }
              });

            // otherwise, enable all options
            } else {
              $(selector + ' option').each(function() {
                if (!$(this).is(':selected')) {
                  $(this).prop("disabled", false);
                }
              });
            }

            $('.selectpicker').selectpicker('refresh');
            num_selected = 0;
          });
        }
      });
      
    </script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接