更改一个选择选项会改变许多其他选项（JavaScript，JQuery）(Changing one select option changes many others (JavaScript, JQuery))

 我在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代码：如果用户选择第一个选项的选项，则该选项在其他选项中被禁用/删除，从而为以后的更改留出空间。 比如说，用户的偏好顺序是：中文，印度文，意大利文...然后在第一个下拉菜单中选择中文，它会被禁用/从其他下拉菜单中删除。 然后，从第二个选择印第安人时，它将被禁用/从其他所有人中删除（包括前一个）。 现在，如果用户决定他的偏好顺序实际上是中文，意大利语，印度语，那么他应该能够改变他的选择，使代码不会崩溃。 比如，我们可以有一个重置按钮，它通过调用此函数重置所有选项： 
 
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/ 
 
 但是，这有一个问题。 如果用户不断改变他的选择，这件事就会崩溃。 我可以选择多个选项。 

I have a lot of select drop downs on a jsp page with a long list of elements. All of these drop downs have the same list of elements. Say I have to get the choice in descending order of preference from the user. I made (many) selects in the following way:
 
<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>
 
I have to create javascript/JQuery code in such a way that if a user selects an option the first select, that option gets disabled/removed in the others, leaving room for changes later. Say, the user's preference order is: Chinese, Indian, Italian... then on selecting Chinese in the first drop down, it gets disabled/removed from the other drop downs. Then, on selecting Indian from the second, it gets disabled/removed from all the others (including the previous one). Now, if the user decides his order of preference is actually Chinese, Italian, Indian, .. he should be able to change his choice in such a way that the code doesn't break down. Say, we can have a button for reset and it resets all the choices by calling this function:
 
function resetFunc()
{
    var options = document.getElementsByClassName("myClass");
        for (var i = 0, l = options.length; i < l; i++) 
        {
            options[i].selectedIndex = "0";
        }
}
 
Any idea how to accomplish this? I need the code to be browser independent (while googling, I read somewhere that IE doesn't support removal of elements from drop down). 
 
EDIT: Here's what I basically want:
 
http://jsfiddle.net/RaBuQ/1/
 
However, there's a problem in this. If a user keeps changing his choices, this thing breaks down. I'm able to select multiple choices.

原文：https://stackoverflow.com/questions/31203770