Question

我有一个列表框，我必须将其选择限制为最多5个项目。如果选择了第6个项目，我想“取消选择”它。

但是，我在查找最后选择的项目时遇到了一些问题，并“取消选择”它。最后一项选择了必要的$（“＃mySelect选项：最后”）......

如何获取列表框的选定项目？

感谢!!!

Answer 1

虽然会有一个短暂的“闪现”选择（你可能希望在<span>下面显示<select>来说明达到最大选择权等），但这样做会有效。

$('#mySelect').click(function(e) {
  if ($('option:selected',this).length > 5) {    
     $(e.target).removeAttr('selected');  
  }
});

我会把它作为练习让你使用键盘选择性。

这是Working Demo

修改

好的，我承认这也不是第一次因为我也没有在IE中测试答案而被蜇（IE中的<select>元素似乎存在很多问题），但这是一个灵活的解决方案，我已经在IE 6和Firefox 3.5.3中测试过，它可以在两者中运行。我把它包装在一个插件中，以防你在多个页面上需要它

(function($) { $.fn.maxLimitSelect = function(max) { if (!max || !/^\d+$/.test(max)) return this; return this.each(function() { $(this).bind("click change keypress",{ max: max },function(event) { var options = $('option', this); var max = event.data.max; var selected = $('option:selected', this); var indexes; if (selected.length === max) { indexes = $.map(options, function(e, i) { if(e.selected) return i; }); $.data(this, "indexes", indexes); } else if (selected.length > max) { indexes = $.data(this, "indexes"); options .removeAttr('selected') .each(function() { var $this = $(this); if ($.inArray($this.prevAll().length, indexes) !== -1) { $this.attr('selected','selected'); } }); } }); }); } })(jQuery);

然后使用，它只是

$('#mySelect').maxLimitSelect(5);

传递可以选择的最大项目数。这适用于测试的IE和Firefox版本中的键和鼠标选择，尽管有趣的是，IE 6似乎不支持 Ctrl hold和 Space 来选择多个项目，但是允许持有 Shift 来选择多个连续的项目。该插件确实将此限制为传入的最大值

这是 Working Demo

Answer 2

：选择器的最后一部分将选择选择列表中的“最后”物理项目（它与是否被选中无关）。

AFAIK，您需要迭代选项，并测试是否选择了每个选项（以获取计数）或使用：选择的伪选择器。

//Or as noted by @peirix you can try to get it with :selected.
//Note that this will just clear the last (by rendered order) selection...
//not the "last" option that was selected.

if($("#mySelect option:selected").size() >= 6){
  $("#mySelect option:selected:last").attr('selected', null);
}

<强>更新

哇，这比我想象的要复杂得多！......下面是一个有效的测试例子......它可能更干净，但我会把它留给其他人来破解; - ）

<script>
  $('#mySelect').bind('change', function(){
    if($("#mySelect option:selected").size() == 5){
      //5 picked, (re)store them...
      var sel = [];
      $("#mySelect option").each(function(i){
        if($(this).attr('selected')){
          sel[i] = true;
        } else {
          sel[i] = false;
        }
      });
      $(this).data('selectedIndexes',sel);
    } else if($("#mySelect option:selected").size() >= 6){
      //too many reset to orig...
      $("#mySelect option").each(function(i){
        if($(this).parent().data('selectedIndexes')[i]){
          $(this).attr('selected', 'selected');
        } else {
          $(this).attr('selected', '');
        }
      });
    }
  });
</script>

示例HTML：

<select id="mySelect" multiple="multiple" size="12">
  <option value="a">aaaaaaaaaaaa</option>
  <option value="b">bbbbbbbbbbbb</option>
  <option value="c">cccccccccccc</option>
  <option value="d">dddddddddddd</option>
  <option value="e">eeeeeeeeeeee</option>
  <option value="f">ffffffffffff</option>
  <option value="g">gggggggggggg</option>
  <option value="h">hhhhhhhhhhhh</option>
  <option value="i">iiiiiiiiiiii</option>
  <option value="j">jjjjjjjjjjjj</option>
  <option value="k">kkkkkkkkkkkk</option>
  <option value="l">llllllllllll</option>
</select>

Answer 3

这基本上会监听任何被点击的选项。如果单击一个，脚本将检查选择了多少总选项（包括刚刚单击的选项）。如果所选选项的数量超过5，则最近点击的项目将被“取消选择”。

$("#mySelect").click(function() {
    var num_selected = $('#mySelect option:selected').length;
    if(num_selected > 5) {
        $(e.target).removeAttr('selected');
    }
});

如果您想让人们知道为什么他们的选项被取消选择，您可以这样做：

$("#mySelect").click(function(e) {
    var num_selected = $('#mySelect option:selected').length;
    if(num_selected > 5) {
        $(e.target).removeAttr('selected');
        alert('You are limited to 5 options at a time...');
    }
});

希望能为你效劳。此代码的灵感来自peirix。

Answer 4

这应该可以解决问题：

$("#mySelect option:checked:last").val(); //or not

对Cory Larson的回答进行了重写：

$("#mySelect option").mousedown(function() {
   if ($("#mySelect :checked").length > 5) {
      return false;
   }
   return true;
});

当达到最大数量时，这不会让用户检查另一个选项。你可能会向用户写出一些内容，说明已达到最大数量。

Answer 5

你必须得到最后一个吗？你不能只计算选择了多少，然后阻止进一步的选择？

此函数将检查给定的SELECT元素是否包含少于 “最大”选择的选项。

function checkLimits( list, maximum ) {
    var options = list.options;
    var size = options.length;
    var numSelected = 0;

    for( var i = 0; i < size; ++i ) {
        if( options[ i ].selected ) ++numSelected;
    }
    if( numSelected > maximum ) {
        alert( 'You have selected more than ' + maximum + ' options.\n' +
            'Please deselect ' + ( numSelected - maximum ) + ' option(s) then
            try again.' );
        return false;
    }
    return true;
}

要直接从表单的onsubmit事件中调用它，您可以执行以下操作：

<select ... onsubmit="return checkLimits(this.listName, 2)">

你可以jQueryify它，但这应该让你开始。取自http://bytes.com/topic/javascript/answers/93760-please-help-limit-number-selections-multiple-select-list-box#post316514

Answer 6

这似乎适用于我所做的一个小测试页面：

$('#mySelect option:selected:gt(4)').removeAttr('selected')

Answer 7

$('#mySelect option:selected').length;似乎不适用于IE。在Chrome中运行良好。

如何使用jQuery获取ListBox中的最后一个选定值？

7 个答案: