使用shift键时,如何限制select元素中的选定选项

时间:2013-12-24 12:56:49

标签: javascript jquery range shift multiple-select

HTML

<select id="my-select" multiple="multiple" size="8" style="width:200px">
    <option value="0">0</option>
    <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>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
</select>

JQUERY

$('#my-select option').on('click',function(){
    var count = $('#my-select').find('option:selected').length;
    $('#dg').html(count);
        if(count>10){
            $(this).attr('selected',false); 
    alert('limit 10');
         }
 });

http://jsfiddle.net/LxNMm/

单击选项时,计算所选选项的计数并将其限制为10,但如果单击选项并按Shift键并选择范围,则选择可能大于10.如何检测计数按shift键选择范围时选择的选项

2 个答案:

答案 0 :(得分:1)

您可以尝试以这种方式更新值:

 $('#my-select').on('change', function () {
    var count = $(this).find('option:selected').length;
    $('#dg').html(count);
    if (count > 10) {
       $('option:gt(9)', this).attr('selected', false);
       count = $(this).find('option:selected').length;
       $('#dg').html(count);
       alert('error');
    }
});

Your updated demo fiddle

答案 1 :(得分:0)

请勿使用click的{​​{1}}事件,而应使用<option />的{​​{1}}事件

change

fiddle