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

Changing one select option changes many others (JavaScript, JQuery)

本文关键字：选项 其他 JQuery 许多 JavaScript 选择 一个      更新时间：2023-09-26

我在一个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/

然而，这里面有一个问题。如果用户不断更改他的选择，这个东西就会崩溃。我可以选择多个选项。

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

这是一把小提琴。

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

由于您已经标记了这个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" />

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

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

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

相关文章：