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，等等......

任何想法如何实现它？

Answer 1

使用纯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);

DEMO： http://jsfiddle.net/Tp2z7/

你可以用jQuery写一些相同的东西：

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

DEMO： http://jsfiddle.net/Tp2z7/1/

Answer 2

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

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

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');
});

<强> Demo

禁用所选选项： （这不适用于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);
});

<强> Demo

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

2 个答案: