Question

我尝试为多个选择框设置最小和最大选择值。

我在这里看到类似的单选按钮列表（仅限最大值） http://jsfiddle.net/rREfg/1/

var maxCheckedCount = 5;
var maxCheckedAlertMessage = 'Woops! Too many selected!';

    jQuery('input[type=checkbox]').click(function(){
        var n = jQuery('input:checked').length;
        if(n>=maxCheckedCount){
            jQuery(this).prop('checked',false);
            alert(maxCheckedAlertMessage);
        }
    });

现在，如果这是我的新html

<select multiple size=7>
    <option value="1">Strawberry</option>
    <option value="2">Prune</option>
    <option value="3">Lemon</option>
    <option value="4">Peach</option>
    <option value="5">Apple</option>
    <option value="6">Banana</option>
    <option value="7">Orange</option>
</select>

如何调整代码以获得最小选择2项和最多选择5项？

Answer 1

你可以像这样实现它

<强> HTML

<select multiple size=7>
   <option value="1">Strawberry</option>
   <option value="2">Prune</option>
   <option value="3">Lemon</option>
   <option value="4">Peach</option>
   <option value="5">Apple</option>
   <option value="6">Banana</option>
   <option value="7">Orange</option>
</select>

<强>的jQuery

var maxCheckedCount = 5;
var maxCheckedAlertMessage = 'Woops! Too many selected!';

jQuery('select').change(function(event) {
    var n = $(this).children(':selected').length;
    if(n >= maxCheckedCount){
        $(this).children().prop('selected',false);
        alert(maxCheckedAlertMessage);
        return false;
    }
});
jQuery('.checkValid').click(function()
{
    if($('select').children(':selected').length <= 2) {
       alert('Keep Adding');
       return false;
    }
});

＆＃13;

var maxCheckedCount = 5;
    var maxCheckedAlertMessage = 'Woops! Too many selected!';

        jQuery('select').change(function(event) {
            var n = $(this).children(':selected').length;
            if(n >= maxCheckedCount){
                $(this).children().prop('selected',false);
                alert(maxCheckedAlertMessage);
                n = maxCheckedCount;
                return false;
            }
        });
        jQuery('.checkValid').click(function()
        {
           if($('select').children(':selected').length <= 2) {
              alert('Keep Adding');
              return false;
           }
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=7>
    <option value="1">Strawberry</option>
    <option value="2">Prune</option>
    <option value="3">Lemon</option>
    <option value="4">Peach</option>
    <option value="5">Apple</option>
    <option value="6">Banana</option>
    <option value="7">Orange</option>
</select>
<button class='checkValid'>Clike Me!</button>

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/9k1sgbjz/1/

＆＃13;

var selectedOption = [];
$('select option').click(function(){
	var index = selectedOption.indexOf($(this).text());
	if( index < 0){
  	// insert
    selectedOption.push($(this).text());
  }else{
  	// remove
    selectedOption.splice(index, 1);
  }
  if( selectedOption.length < 2 || selectedOption.length === 5){
  	$('button').prop('disabled', true);
  }else{
  	$('button').prop('disabled', false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=7>
    <option value="1">Strawberry</option>
    <option value="2">Prune</option>
    <option value="3">Lemon</option>
    <option value="4">Peach</option>
    <option value="5">Apple</option>
    <option value="6">Banana</option>
    <option value="7">Orange</option>
</select>

<button type="submit" disabled>
Submit
</button>

＆＃13;

而不是警告或控制台，我只是启用/停用 按钮，即显示在下方。

在多个框中设置最小和最大选择数

2 个答案: