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

Question

我在 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);
    } 

我尝试做下一件事:当用户在一个选择框中选择一个选项时，该选项将在第二个选择框中被删除......如果您再次选择不同的选项，那么最后一个选项将从第二个选项中删除，并显示之前的选项，依此类推...

有什么想法如何实现吗？

Answer 1

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

1. 隐藏所选选项:(这可能不适用于旧浏览器)

   • 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

<小时/>

1. 禁用所选选项: (这不适用于 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