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

Remove last selected element from the multiple select if user select more than 3 option using jquery

本文关键字：选择 元素 最后 删除 选项 用户 jquery 3个 如果      更新时间：2023-09-26

我只需要从多选中选择3个选项。如果用户选择了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>

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

这非常好用：

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/

嗯，我不喜欢jQuery，所以我开发了同样的（fiddle），但使用纯、香草、易于阅读的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;
}

第页。S.没有全局变量！：P

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

相关文章：