jQuery選擇來獲取所有下拉值，問題2個下拉菜單

Question

HTML表

列＃1：西1 [Country DropDown] | 山口＃2 [StateDropDown]

行＃2：山口1 [Country DropDown] | 西2 [StateDropDown]

表中有2 dropdownlists，爲Country & State - 這個工程上一個下拉列表，但其禁用其他/狀態下拉菜單以及！

問題是，雖然都美國和奧斯特有diff states selected文本，但在col2 endup與相同選擇State ID /值3（如果我選擇加利福尼亞州，珀斯也被禁止！因此，我的代碼被禁用他們作爲重複，因爲它比較選定的值而不是文本）例如這種選擇禁用珀斯..

[USA]  -> [California] (value = 3) 
[Australia] -> [Perth]  (*also* has value= 3) so its disabled 

如何做到這一點在每行兩個國家&狀態的unique combination？或只是比較的下拉菜單的文本？...

1. 即選項1，如何檢查兩個Country ID + State ID Value already exist？
2. 選項2，只是比較所選擇的文本（感覺半烘焙）

JS Fiddle

// Javascript Does not disable States previously selected 
$("#CountryTable").on('change', '.State', function() { 
var dropDownText = $('#CountryTable .State select').not(this).map(function()    { 
return this.SelectedText; // does not work this.val() works but useless 
}).get(); 
var selectedValue = $(this).val(); 
var otherDropdowns = $('.State').not(this); 

otherDropdowns.find（ '選項[值=' +了selectedValue + ']'）。丙（」禁用'，true）; }）;

---

<table id="CountryTable"> 
<tbody id="CountryTableBody"> 
    <tr class="row"> 
     <td> 
      <select> 
       <option value="1">Country A</option> 
       <option value="2">Country B</option> 
       <option value="3">Country C</option> 
      </select>    
     </td> 

     <td> 
      <select> 
       <option value="1">State 1</option> 
       <option value="2">State 2</option> 
       <option value="3">State 3</option> 
       <option value="4">State 4</option> 
       <option value="5">State 5</option> 
      </select>    
     </td>   
    <tr> <!-- in JS prevent previous selection --> 
    <tr class="row"> 
     <td> 
      <select> 
       <option value="1">Country A</option> 
       <option value="2">Country B</option> 
       <option value="3">Country C</option> 
      </select>    
     </td> 
     <td> 
      <select> 
       <option value="1">State 1</option> 
       <option value="2">State 2</option> 
       <option value="3">State 3</option> 
       <option value="4">State 4</option> 
       <option value="5">State 5</option> 
      </select>    
     </td>   
    <tr>  
</tbody> 

---

***圖片展示的東西類似 ......不準確

---

Answer 1

釷是不是一個完美的解決方案，你可以複製/粘貼，但它是真正接近你想要的。

1. 真正table，優選id
2. 的td，優選class
3. 隱藏的table被克隆，優選id：

   我用4個參數使得它作爲一個整體功能

4. 新行button，最好是id

讓您隨心所欲地在HTML中命名您想要的東西，而不是關心在腳本中使用這4個位置的多個位置。

現在...這只是一個好的開始。
實際上，當用戶從「國家A」更改爲「國家B」時，狀態下拉應該不同！

這是我離開的唯一問題...因爲我不知道如何加載這些選項。

我花了我很多時間......我這樣做是因爲我無法相信這樣一個「簡單」的要求可能非常複雜......我不得不粉碎它
;）。

所以這裏是代碼（僅JS）和一個工作CodePen演示。

var excusiveSelect = function(tableID,rowCLASS,dummyID,cloneBtn){ // Preferably ID, CLASS, ID, ID 

    console.clear(); 

    // Cloning function 
    var cloneRow = function(){ 
    var newrow = $(dummyID).find(rowCLASS).clone(); 
    $(tableID).append(newrow); 
    refresh_mapping(); 
    }; 

    // Generate new lines 
    $(cloneBtn).on("click",cloneRow); 

    // ================================================================================ INITIALISATION 
    // Selection mapping 
    var row_count; 
    var row_map = {}; 

    // Get select clas names per colums 
    var col_count = $(rowCLASS).first().find("td").length; 
    var col_classes = []; 
    for(i=0;i<col_count;i++){ 
    col_classes[i] = $(document).find(rowCLASS).first().find("select").eq(i).attr("class").split(" ").join("."); 
    } 
    console.log("SELECT CLASSES: "+JSON.stringify(col_classes)); 

    var refresh_mapping = function(){ 
    row_count = $(document).find(rowCLASS).length-1; 
    console.log("ROWCOUNT: "+row_count); 
    for(i=0;i<row_count;i++){ 

     row_map["row_"+i] = {}; 
     $(tableID).find(rowCLASS).eq(i).find("select").each(function(index){ 

     // Get the select classes as object attribute. 
     var thisClasses = $(this).attr("class").split(" ").join("."); 

     // For each row/select get the selected index. 
     row_map["row_"+i][thisClasses] = $(this)[0].selectedIndex; 
     }); 
    } 
    console.log("VALUES MAPPING: "+JSON.stringify(row_map)); 
    } 

    cloneRow(); 

    // ================================================================================ FROM COLUMN #1 

    $(document).on("change","."+col_classes[0],function(){ 
    console.log("\n======================================================= Country change\n"); 

    refresh_mapping(); 

    // Disables options already selected in ALL col_classes[1] where col_classes[0] is the same 
    for(i=0;i<row_count;i++){ 

     if((row_map["row_"+i][col_classes[0]] == $(this)[0].selectedIndex) 
     && ( $(this).closest(rowCLASS).index() != i)){ 

     $(this).closest(rowCLASS).find("."+col_classes[1]+" option").eq(row_map["row_"+i][col_classes[1]]).attr("disabled",true); 

     // Else enable the option if not self 
     }else{ 
     if($(this).closest(rowCLASS).index() != i){ 
      $(this).closest(rowCLASS).find("."+col_classes[1]+" option").eq(i).attr("disabled",false); 
     } 
     } 
    } 

    }); 

    // ================================================================================ FROM COLUMN #2 

    $(document).on("change","."+col_classes[1],function(){ 
    console.log("\n======================================================= State change\n"); 
    console.clear(); 
    refresh_mapping(); 

    thisIndex = $(this)[0].selectedIndex;    // Option selectedIndex 
    thisRowIndex = $(this).closest(rowCLASS).index();  // Row index 

    // If same country... 
    var thisCol0index = $(this).closest(rowCLASS).find("."+col_classes[0])[0].selectedIndex; 


    $(tableID).find("."+col_classes[1]).each(function(){ 
     if($(this).closest(rowCLASS).find("."+col_classes[0])[0].selectedIndex == thisCol0index){ 

     // Zap tout les disabled 
     $(this).find("option:not(:eq(0))").attr("disabled",false); 

     // Use mapping to disable based on col_classes[0] 
     for(i=0;i<row_count;i++){ 
      if(row_map["row_"+i][col_classes[0]] == thisCol0index){ 

      $(this).find("option").eq(row_map["row_"+i][col_classes[1]]).attr("disabled",true); 
      } 
     } 

     } 
    }); 
    }); 
    // ================================================================================ 
} 

// Init! 
excusiveSelect("#CountryTable",".row","#DummyTable","#newRow"); // Preferably ID, CLASS, ID, ID