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

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.

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

Answer 2

由于您已标记此jQuery，因此下面的示例将使用：

＆＃13;

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();

＆＃13;

<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" />

＆＃13;

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

}

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

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

3 个答案: