從其他選擇框中選擇框中選擇框動態刪除選項，

Question

我有兩個select box在Jquery Mobile與相同的數據選項。在當我初始化頁面開始我建立他們動態：

var first = document.getElementById("selectBoxFirst"); 
    var second = document.getElementById("selectBoxSecond"); 

    for (var i = 0; i < this.data.length; i++) 
    { 
     first.options[i] = new Option(this.data[i].option, this.data[i].optionId); 
     second.options[i] = new Option(this.data[i].option, this.data[i].optionID); 
    } 

我嘗試做的下一件事：當用戶選擇一個選擇框的選項，該選項將在第二個被刪除.. 如果你再次選擇不同的選項，所以這最後一個選項將從第二個刪除和previos將顯示，等等...

任何想法如何實現它？

Answer 1

您可以選擇隱藏或禁用所選選項。

1. 隱藏選定的選項：（這可能不是舊的瀏覽器工作）

   • CSS：

     .hide { 
         display: none; 
     } 
     

   • JS

     $('#first').on('change', function() { 
         $('select option.hide').removeClass('hide'); 
         var sel = $('option:selected', this).index(); 
         $('#second option:eq("' + sel + '")').addClass('hide'); 
     }); 
     
     $('#second').on('change', function() { 
         $('select option.hide').removeClass('hide'); 
         var sel = $('option:selected', this).index(); 
         $('#first option:eq("' + sel + '")').addClass('hide'); 
     }); 
     

Demo

---

1. 禁用所選的選項：（這並不適用於IE7和更早版本的工作）

   • JS

     $('#first').on('change', function() { 
         $('select option:disabled').prop('disabled', false); 
         var sel = $('option:selected', this).index(); 
         $('#second option:eq("' + sel + '")').prop('disabled', true); 
     }); 
     
     $('#second').on('change', function() { 
         $('select option:disabled').prop('disabled', false); 
         var sel = $('option:selected', this).index(); 
         $('#first option:eq("' + sel + '")').prop('disabled', true); 
     }); 
     

Demo

Answer 2

使用普通的JavaScript的方法是相當簡單：

var select1 = document.getElementById('first'), 
    select2 = document.getElementById('second'); 

select1.addEventListener('change', function() { 
    while (select2.firstChild) { 
     select2.removeChild(select2.firstChild); 
    } 
    for (var i = 0, len = this.options.length; i < len; i++) { 
     if (this.options[i].value !== this.value) { 
      select2.appendChild(this.options[i].cloneNode()); 
     } 
    } 
}, false); 

DEMO：http://jsfiddle.net/Tp2z7/

---

你可以寫同樣使用jQuery短一點：

$('#first').on('change', function() { 
    $('option:not(:selected)', this).clone().appendTo($('#second').empty()); 
}); 

DEMO：http://jsfiddle.net/Tp2z7/1/