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

Question

我有一个列表框,我必须限制其选择最多5项.如果选择了第6个项目,我想"取消选择"它.

但是,我在找到最后一个选定的项目并"取消选择"它时遇到了一些问题.最后一项选择了必要的$("#mySelect选项:最后一次")......

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

谢谢!!!

Answer 1

这样做,虽然有一个简短的选择"闪光"(你可能希望<span>在下面显示<select>一下,比如达到最大选择).

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

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

这是一个工作演示

编辑:

好吧,我承认这不是我第一次被蜇也没有在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保持和Space选择多个项目,但允许保持Shift选择多个连续项目.该插件确实将此限制为传入的最大值.

这是一个工作演示