5

我只需要从多项选择中选择 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>

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

4

3 回答 3

6

这很好用：

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/

于 2013-07-18T13:07:17.270 回答
6

好吧，我不喜欢 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;
}

PS没有全局变量！:P

于 2013-07-18T13:27:52.360 回答
4 
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

于 2013-07-18T14:02:22.147 回答