如何使用jQuery获取列表框中的最后一个选定值? [英] How can I get the last selected value in a ListBox with jQuery?

问题描述

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

I have a listbox and I must limit its selection up to 5 items. If a 6th item is selected, I want to "deselect" it.

但是，在查找最后选择的项目并取消选择"它时遇到了一些问题.选择的最后一项是必须的$(#mySelect option:last")...

But, I'm having some problems on finding the last selected item and "deselect" it. And the last item selected it's necessary the $("#mySelect option:last")...

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

How can I get the selected item of a listbox??

谢谢！

推荐答案

可以做到这一点，尽管有短暂的选择(您可能希望在<select>下方显示<span>说出达到最大选择数"之类的内容.

This will do it, although there is a brief "flash" of selection (you might want ot have a <span> show up underneath the <select> to say something like Maximum selection reached).

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

我将保留它作为练习，使它也可以与键盘选择性一起使用.

I'll leave it as an exercise for you to get it working with keyboard selectivity too.

这是一个> 工作演示

好吧，我承认这不是我第一次也没有在IE中测试答案(这似乎不是第一次)(IE中的<select>元素似乎有很多问题)，但是这里是一种灵活的解决方案，我已经在IE 6和Firefox 3.5.3中进行了测试，并且在这两种方法中均可使用.我将其包装在一个插件中，以防万一您需要此页面

Ok, I'll admit that this is not the first time that I have been stung by also not testing an answer in IE too (there seem to be a lot of problems with <select> elements in IE), but here is a flexible solution that I have tested in IE 6 and Firefox 3.5.3 and it works in both. I've wrapped it in a plugin, in case you need this on more than one page

(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 6似乎不支持 Ctrl 保持键和 Space 来选择多个项目，但是这在经过测试的IE和Firefox版本中都可以使用键和鼠标选择.确实允许按住 Shift 来选择多个连续的项目.该插件确实将其限制为传入的最大值.

passing in the maximum number of items that can be selected. This works with key and mouse selections in both IE and Firefox versions tested although interestingly, IE 6 doesn't appear to support the Ctrl hold and Space to select multiple items, but does allow holding Shift to select a number of contiguous items. The plugin does limit this to the passed in max.

这里是 工作演示

Here's a Working Demo

这篇关于如何使用jQuery获取列表框中的最后一个选定值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！