限制多选多选

Question

各位，请帮帮我。我有 3 个选择多个。我想限制每个选择多个具有不同限制的选定选项。例如，在第一次选择时，我只想将其限制为 2 个选定选项。在第二次选择时，我只想将其限制为 4 个选定选项。在第三个选择中，我只想将其限制为 3 个选定选项。对不起。我是新的。请帮我。谢谢你

// total option that can be selected for this should be 2
<select multiple class='qwerty' size = "3" style = "width:10%;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

 // total option that can be selected for this should be 4
<select multiple class='qwerty' size = "3" style = "width:10%;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

// total option that can be selected for this should be 3
<select multiple class='qwerty' size = "3" style = "width:10%;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>


                <script src="jquery.min.js"></script>
                    <script language = "JavaScript">
                        var last_valid_selection = null;
                        $('.qwerty').change(function(event) {
                            if ($(this).val().length > 2) {
                              alert('You can only choose 2!');
                              $(this).val(last_valid_selection);
                            } else {
                              last_valid_selection = $(this).val();
                            }
                         });
                    </script>
             </script>

Answer 1

您可以使用the data API 检索与元素关联的data- 属性。我假设您编写的 size 属性用于此目的。

<select multiple class='qwerty' data-size="3" style="width:10%;">

您需要为每个select 元素隔离last_valid_selection。这可以通过创建一个捕获外部变量的闭包来实现。

<script src="jquery.min.js"></script>

<script type="text/javascript">
    $('.qwerty').change((function () {
        var last_valid_selection = null; // closure variable private to each of the select element
        return function(event) {
            var limit = parseInt($(this).data('size')); // data API to get the attribute data-size
            if ($(this).val().length > limit) {
                alert('You can only choose ' + limit + '!');
                $(this).val(last_valid_selection);
            } else {
                last_valid_selection = $(this).val();
            }
         };
    })());
</script>

示例请参考jsFiddle。