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

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

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

填充（document.getElementById（'sel1'）；

函数填充（op1）
{
var myArray=[“中文”、“意大利文”、“印度文”…//一长串元素
var-sel=op1；
对于（var i=0；i

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

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

函数resetFunc（）
{
var options=document.getElementsByClassName（“myClass”）；
对于（变量i=0，l=options.length；i

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

编辑：以下是我基本上想要的：

---

但是，这其中有一个问题。如果用户不断更改其选择，这件事就会发生故障。我可以选择多个选择。

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

假设您有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);
   }

}

功能填充\其他\选择（编号）{
var num_选择器=3；
while（数字

如果我选择了“足球”、“高尔夫”、“网球”，我需要在第三个框中选择“无偏好”，然后才能在其他框中选择它。我认为从用户体验的角度来看，这是可以接受的。
因为您已经标记了这个jQuery，我下面的示例将利用它：


函数填充（）{
var myArray=[“中文”、“意大利文”、“印度文”]；
$（'.myClass'）。每个（函数（）{
var dis=$（本）；
dis.append（$（“”）attr（“value”），text（“select”）；
$.each（myArray，function（i，o）{
dis.append（$（“”）.attr（“value”，o）.text（o））；
});
});
}
函数init（）{
$（'.myClass'）.html（'.prop（'disabled'，false）；
填充（）；
}
$（document）.on（'change'，'.myClass'，function（）{
$（'.myClass选项[value=“”+$（this）.val（）+“]：未选中）。删除（）；
$（this.prop（'disabled'，true）；
});
$（“#重置”）。单击（初始化）；
init（）；

请创建plunker或fiddle@mplungjan：不，实际上我没有。但它确实给了我一个JSFIDLE示例，在我的案例中也不起作用。因此：
$（this）.find（“option”）.prop（“disabled”，false）；
-它必须是有条件的too@mplungjan很抱歉，我没有理解。这个问题意味着运行额外的代码来检查任何选项是否相同。这些选项可能会被删除吗？因此，如果用户方面有更正，则总是会重置。这有点低效。这意味着在re可能是一个更简单的解决方案。我知道，这就是为什么我说“可能不是最有效的解决方案，但如果没有更好的解决方案，你应该尝试一下”：）我的意思是添加“像你说的那样”。这确实有效。一个简单的问题-onclick和onchange函数在这里做什么-p1（优先级1）？我不明白。比我的更优雅（我删除了该选项）唯一的改进是使用clone从第一个选项中生成其他选项。@user2816215具有这些onclick/change函数。我在示例中删除了它们，但没有删除标记。请随意删除：）。我没有包括生成
选择
，因为我以为你已经有了这一点-你只是在寻找一种方法来启用/禁用“已选择”选项。是吗？哦，是的，是的。而且，它工作得很好。谢谢！@DaveSalomon yep，会的。还有一件事-我把它放在一起-似乎有一个问题：这里：好的，我正在尝试这个。一个问题是，如果我在一个选择中选择多次，选择将被删除，然后我无法在另一个选择中选择同一个选择。在这种情况下，一旦做出选择，是否应该禁用整个选择？否则，这些选择将无法在另一个选择中。例如，如果我更改了第三个选择在第一个框中，下两个框没有选择。@user2816215这将是一个问题。当然可以解决，但我现在开车，可能不建议解决代码问题。我将添加一些内容later@user2816215好的，回到电脑上，为上面的问题添加了一个快速修复程序。这将设置整个元素选择ent后，将其设置为“已禁用”，因为我看不出有任何理由执行与Dave相同的解决方案
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);
   }

}

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