更改一個選擇選項會更改許多其他選項（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代碼：如果用戶選擇第一個選項的選項，則該選項在其他選項中被禁用/刪除，從而為以后的更改留出空間。 比如說，用戶的偏好順序是：中文，印度，意大利......然后在第一個下拉菜單中選擇中文，它會被禁用/從其他下拉菜單中移除。 然后，從第二個選擇印第安人時，它將被禁用/從所有其他人（包括前一個）中刪除。 現在，如果用戶決定他的偏好順序實際上是中文，意大利語，印度語，那么他應該能夠改變他的選擇，使代碼不會崩潰。 比如，我們可以有一個重置按鈕，它通過調用此函數重置所有選項：

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

這是一個小提琴。

如果我選擇了“足球”，“高爾夫”，“網球”，我需要在第三個框中選擇“無偏好”，然后才能在其他一個框中選擇它。 從UX的角度來看，我認為這是可以接受的。

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

以下可能不是最有效的解決方案，但如果沒有更好的方法，您應該嘗試它：當您更改選擇時，清空所有其他選擇，然后用所有其他選項填充它們。

假設您在onchange事件中有3個選擇：sel1，sel2，sel3，您可以調用函數“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);
   }

}

您也可以在填充函數中添加一個參數，顯示已經選擇了哪些值以防止它們再次出現