更改一个选择选项会更改许多其他选项（JavaScript、JQuery）

Question

我在一个带有一长串元素的 jsp 页面上有很多选择下拉菜单。所有这些下拉列表都具有相同的元素列表。假设我必须按照用户的偏好降序获得选择。我通过以下方式进行了（许多）选择：

<select id="sel1" class="myClass">
        <script>
         populate(document.getElementById('sel1'));
        </script>
  </select>

...

<script>
function populate(op1)
{

    var myArray = ["Chinese", "Italian", "Indian", ...//a long list of elements
        var sel = op1;
        for(var i = 0; i < myArray.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = myArray[i];
            opt.value = myArray[i];
            sel.appendChild(opt);
        }
}
</script>

我必须以这样一种方式创建 javascript/JQuery 代码：如果用户在第一次选择时选择了一个选项，则该选项在其他选项中会被禁用/删除，为以后的更改留出空间。比如说，用户的偏好顺序是：中文、印度、意大利......然后在第一个下拉菜单中选择中文时，它会从其他下拉菜单中被禁用/删除。然后，在从第二个中选择 Indian 时，它会从所有其他（包括前一个）中禁用/删除。 现在，如果用户决定他的偏好顺序实际上是中文、意大利文、印度文……他应该能够以这样的方式更改他的选择，这样代码不会被破坏。比如说，我们可以有一个重置按钮，它通过调用这个函数来重置所有的选择：

function resetFunc()
{
    var options = document.getElementsByClassName("myClass");
        for (var i = 0, l = options.length; i < l; i++) 
        {
            options[i].selectedIndex = "0";
        }
}

知道如何做到这一点吗？我需要代码独立于浏览器（在谷歌搜索时，我在某处读到 IE 不支持从下拉列表中删除元素）。

编辑：这就是我想要的：

http://jsfiddle.net/RaBuQ/1/

但是，这里有一个问题。如果用户不断改变他的选择，这件事就会崩溃。我可以选择多个选项。

Answer 1

$('select').change(function(){
    var v = $(this).val();
    $('select option[value="'+$(this).data('old-val')+'"]').prop('disabled', false);
    $(this).data('old-val',v);
    if(v != "0"){
        $('select option[value="'+v+'"]').not(this).prop('disabled',true);
    }
});

Here's a fiddle.

如果我选择了“足球”、“高尔夫”、“网球”，我需要先在第三个框中选择“无偏好”，然后才能在其他框中选择它。我认为从用户体验的角度来看这是可以接受的。

Answer 2

既然你已经标记了这个 jQuery，我下面的示例将使用它：

function populate() {
  var myArray = ["Chinese", "Italian", "Indian"];
  $('.myClass').each(function() {
    var dis = $(this);
    dis.append($("<option>").attr("value", "").text("select"));
    $.each(myArray, function(i, o) {
      dis.append($("<option>").attr("value", o).text(o));
    });
  });
}

function init() {
  $('.myClass').html('').prop('disabled', false);
  populate();
}

$(document).on('change', '.myClass', function() {
  $('.myClass option[value="' + $(this).val() + '"]:not(:checked)').remove();
  $(this).prop('disabled', true);
});

$('#reset').click(init);

init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel1" class="myClass"></select>
<select id="sel2" class="myClass"></select>
<select id="sel3" class="myClass"></select>
<input type="button" id="reset" value="Reset options" />

Answer 3

以下可能不是最有效的解决方案，但如果没有更好的解决方案，您应该尝试一下：当您更改一个选择时，清空所有其他选择，然后用所有其他选项填充它们。

假设您有 3 个选择：sel1、sel2、sel3 在 onchange 事件中，您可以调用函数“fill_other_sel(number)”，其中 number 是当前选择器的编号。

此函数应删除当前选项，然后使用以前的选择器填充检查，这样您就不会填充以前选择的值。

function fill_other_sel(number){
   var num_selectors = 3;
   while (number <= num_selectors){
      number++;
      $('#sel'+number).options.length=1;
      populate('sel'+number, already_selected_values_array);
   }

}

您也可以在填充函数中添加一个参数，显示哪些值已被选中，以防止它们再次出现