如何设置引导程序多选最小选择值和最大选择值

How to set bootstrap multiselect min selected and max selected value

本文关键字：选择何设置设置引导程序更新时间：2023-09-26

我有一个带有5个选项的多选下拉列表。我想要用户一次最多可以选择3个选项，一次最多只能选择1个选项，如何做到这一点？

我的代码是这样的---

<select id="auditorview" multiple="multiple">
                          <option value="A1" >AHT</option>
                          <option value="A2" >Offers</option>
                          <option value="A3" >Handled</option>
                          <option value="A4" >Xyz</option>
                          <option value = "A5"> Abc</option>
        </select>
<script type="text/javascript" >
$(document).ready(function () {
$('#auditorview').multiselect({
buttonWidth: '150px'
});
});
$('#auditorview').on('change',function(){ 
foo = $(this).val();
if (!$("#auditorview option:selected").length) {
$("#auditorview option[value='"+foo[0]+"']").prop('selected', 'selected');
}
if($("#auditorview option:selected").length===4){
alert("Please select max 3  option !!!");
$("#auditorview option [value selected='"+foo[2]+"']").prop('selected', `false);`
}
})
</script>

更新：（根据要求更新答案）

HTML：

<select id="demo" multiple="multiple">
<option value="">SELECT OPTION(S)</option>
<option value="Option1">Option-1</option>
<option value="Option2">Option-2</option>
<option value="Option3">Option-3</option>
<option value="Option4">Option-4</option>
<option value="Option5">Option-5</option>
<option value="Option6">Option-6</option>
</select><br/><br/>
Message: <label id="msg"></label>

JS：

$(document).ready(function () {
    $("#msg").text("Select atleast One Option");
    $("#demo option").on('click', function () {
        if ($("#demo option:selected").length > 3) {
            $("#msg").text('select Max 3 option at a time');
        } else {
            $("#msg").text("you selected: " + $("#demo option:selected").length);
        }
    });
});

JSFiddle演示

找到解决方案，它非常适合我——

<select multiple id="s">
<option>Option 1
<option>Option 2
<option>Option 3
<option>Option 4
</select>
<script>
$(document).ready(function () {
 $('#s').multiselect();
})
jQuery("#s").on("change", function(){  
            var selectedOptions = $('#s option:selected');
            if ((selectedOptions.length >= 3) && (selectedOptions.length > 1) ) {
                // Disable all other checkboxes.
                var nonSelectedOptions = $('#s option').filter(function() {
                    return !$(this).is(':selected');
                });
                var dropdown = $('#s').siblings('.multiselect-container');
                nonSelectedOptions.each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('li').addClass('disabled');
                });
            }
            else if(selectedOptions.length <= 1){
                 var SelectedOptions = $('#s option').filter(function() {
                    console.log("1 select")
                    return $(this).is(':selected');
                });
                  var dropdown = $('#s').siblings('.multiselect-container');
                    SelectedOptions.each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('li').addClass('disabled');
                });
            }
            else {
                // Enable all checkboxes.
                var dropdown = $('#s').siblings('.multiselect-container');
                $('#s option').each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', false);
                    input.parent('li').addClass('disabled');
                });
            }
        });