設置兩個下拉框的下拉選項互斥

現在有個業務場景，就是同一個頁面上有兩個下拉框，第二個下拉框中的選項去掉第一個下拉框選中的值（互斥）。

 

 

 

 

 

 

 

 

 實現的方式就是動態生成下拉框的option選項，代碼方式如下：

一、首先先獲取下拉框所有選項的dom元素

 

 

 

var Alloptions = $(".single").clone();
二、

setSelectDisabled(".pairTow", $('.pairOne option:selected').val()); //pairOne為左邊下拉框的class；pairTwo為右下拉框calss

function setSelectDisabled(id, selectVal) {
   var oldValue = $(id).val();
   $(id).find('option').remove();
   Alloptions.find("option").each(function(){
      var option = $(this).clone();
      var val = option.attr("value");
      if (oldValue==val) {
         // 默認選擇原來的值
         option.attr("selected",true);
      }
      if(option.val()!=selectVal){
         $(id).append(option);
      }
   });
   // 如果當前選擇的已經被選擇了，那就默認選擇第一個了
   if (oldValue==selectVal) {
      $(id).find('option').eq(0).attr("selected",true);
   }
}
通過循環組裝，即可生成新的互斥下拉選項。