jQueryのセレクタは2つのドロップダウン

Question

HTMLの表

行＃1のすべてのドロップダウン値、問題を取得するには：コル1 [Country DropDown] | コル＃2 [StateDropDown]

ロウ＃2：コル1 [Country DropDown] | コル2 [StateDropDown]

表はCountry & Stateのために、2 dropdownlistsを持っている - これは1つのドロップダウン、上で動作しますが、そのは他/状態のドロップダウンを無効にします！ USAとアウスト・両方が同じ選択State ID /値3でdiff states selectedテキストが、col2 endupにしていながら

問題は、それゆえ私のコードは無効にされた（私はカリフォルニア州を選択した場合は、パースでも無効である！、ありますそれらは選択された値とテキストを比較してから重複している）この選択は、パース..

各行の両方の国の unique combination &状態としてこれを行うにはどのように

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

を無効にしますか？あるいは単にドロップダウンのテキストを比較する？...

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の+ ']'）。「（小道具無効 "、真）。 }）;

---

<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

のThあなたがコピー/ペーストできる完璧なソリューションではありませんが、あなたが望むものに真実に近づいています。

Iは4つの引数で全体関数としてそれを作った：クローン化する隠れtableは、好ましくid、好ましくclass

、td好ましくid

、

1. 実table
2. 新しい行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