javascript - 从选择框中动态删除在其他选择框中选择的选项，

Question

我有两个具有相同数据的选项select box。Jquery Mobile在我初始化页面的开始时，我动态构建它们：

    var first = document.getElementById("selectBoxFirst");
    var second = document.getElementById("selectBoxSecond");

    for (var i = 0; i < this.data.length; i++) 
    {
        first.options[i] = new Option(this.data[i].option, this.data[i].optionId);
        second.options[i] = new Option(this.data[i].option, this.data[i].optionID);
    }

我尝试做下一件事：当用户在一个选择框中选择一个选项时，此选项将在第二个选项中删除...如果您再次选择其他选项，则最后一个选项将从第二个选项中删除，并且将显示previos，依此类推...

任何想法如何实施？

score 0 · Accepted Answer

使用纯 JavaScript，该方法相当简单：

var select1 = document.getElementById('first'),
    select2 = document.getElementById('second');

select1.addEventListener('change', function() {
    while (select2.firstChild) {
        select2.removeChild(select2.firstChild);
    }
    for (var i = 0, len = this.options.length; i < len; i++) {
        if (this.options[i].value !== this.value) {
            select2.appendChild(this.options[i].cloneNode());
        }
    }
}, false);

演示：http: //jsfiddle.net/Tp2z7/

你可以用 jQuery 写同样的东西，稍微短一点：

$('#first').on('change', function() {
    $('option:not(:selected)', this).clone().appendTo($('#second').empty());
});

演示：http: //jsfiddle.net/Tp2z7/1/

score 0 · Accepted Answer

您可以选择隐藏或禁用选定的选项。

隐藏选定选项：（这可能不适用于旧浏览器）

CSS：
```
.hide { 
  display: none;
}
```

JS

$('#first').on('change', function () {
  $('select option.hide').removeClass('hide');
  var sel = $('option:selected', this).index();
  $('#second option:eq("' + sel + '")').addClass('hide');
});

$('#second').on('change', function () {
  $('select option.hide').removeClass('hide');
  var sel = $('option:selected', this).index();
  $('#first option:eq("' + sel + '")').addClass('hide');
});

演示

禁用选定选项：（ 这不适用于 IE7 和更早版本）

JS

$('#first').on('change', function () {
  $('select option:disabled').prop('disabled', false);
  var sel = $('option:selected', this).index();
  $('#second option:eq("' + sel + '")').prop('disabled', true);
});

$('#second').on('change', function () {
  $('select option:disabled').prop('disabled', false);
  var sel = $('option:selected', this).index();
  $('#first option:eq("' + sel + '")').prop('disabled', true);
});

演示

javascript - 从选择框中动态删除在其他选择框中选择的选项，

2 回答 2

Related

Reference