如果用户使用jquery选择3个以上选项,则从多个选择中删除最后选择的元素

Question

我需要从多个选择中仅选择3个选项.如果用户选择的选项多于上一个选定元素,则应替换为单击的新选项.

我有一个例子如下:

<select multiple id='testbox'>
      <option value='1'>First Option</option>
      <option value='2'>Second Option</option>
      <option value='3'>Third Option</option>
      <option value='4'>Fourth Option</option>
      <option value='5'>Fifth Option</option>
      <option value='6'>Sixth Option</option>
      <option value='7'>Seventh Option</option>
      <option value='8'>Eighth Option</option>
      <option value='9'>Ninth Option</option>
      <option value='10'>Tenth Option</option>
    </select>

用户选择时

First option
Second option
Third option

现在他达到最大选择限制3.如果他点击另一个选项,如第十个选项,我需要删除第三个选项并获得选择第十个选项

为此,我尝试了这个但不知道如何实现我的目标

<script type="text/javascript">
    google.load("jquery", "1");

    $(document).ready(function() {
        //alert("1111");
      var last_valid_selection = null;

      $('#testbox').change(function(event) {
        if ($(this).val().length > 2) {
          alert('You can only choose 2!');
          $(this).val(last_valid_selection);
        } else {
          last_valid_selection = $(this).val();
          latest_value = $("option:selected:last",this).val()
          alert(latest_value);
        }
      });

    });
    </script>

请提出一些想法或解决方案.

Answer 1

这很好用:

var lastSelected;

$("#testbox").change(function() {
    var countSelected = $(this).find("option:selected").length;

    if (countSelected > 3) {
        $(this).find("option[value='" + lastSelected + "']").removeAttr("selected");
    }
});

$("#testbox option").click(function() {
    lastSelected = this.value;
});

我必须设置一个全局变量lastSelected以及一个选项单击事件来捕获实际的最后一个选项(this.value在更改事件中给出了我选择的最高选项,而不是实际的最后一个选项).

演示:http://jsfiddle.net/JAysB/1/

Answer 2

好吧,我不喜欢jQuery,所以我开发了相同的(小提琴),但是纯粹的,易于阅读的JavaScript:

document.getElementById('testbox').selopt=new Array();
document.getElementById('testbox').onchange=function(){
    for(i=0; i<this.childNodes.length; i++)
        if(this.childNodes[i].tagName!='OPTION')
            continue;
        else{
            if(this.childNodes[i].selected &&
               this.selopt.indexOf(this.childNodes[i])<0)
                this.selopt.push(this.childNodes[i]);
        }
    if(this.selopt.length==4)
        this.selopt.splice(2,1)[0].selected=false;
}

PS没有全局变量!:P

Answer 3

var lastOpt;
$('#testbox option').click(function () {
    lastOpt = $(this).index();
});
$('#testbox').change(function () {
    if ($('option:selected', this).length > 3) {
        $(' option:eq(' + lastOpt + ')', this).removeAttr('selected');
    }
});

JSFIDDLE