jQuery를 선택 2 드롭 다운

Question

HTML 표

행 # 1에 대한 모든 드롭 다운 값 문제를 얻을 수 있습니다 : 골 1 [Country DropDown] | 골 2 [StateDropDown]

행 2 : 1 골 [Country DropDown] | 골 2 [StateDropDown]

표 Country & State를 들어, 2 dropdownlists이있다 -이 하나의 드롭 다운, 에 작동하지만 그뿐만 아니라 기타/상태 드롭 다운을 해제!

문제는 모두 미국과 아우 스트는 diff states selected 텍스트가 동안이지만,와 col2 endup에 같은 선택 State ID/값 3 (I 캘리포니아를 선택하면, 퍼스 따라서 내 코드가 비활성화됩니다!, 장애인도 그것들은 텍스트가 아닌 선택된 값을 비교 한 이후로 중복 된 것입니다.) 예를 들어 이 선택은 퍼스 ..

[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 + ']'). '(소품 무능한 ', 진실한); }});

---

<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

목 당신이 복사/붙여 넣기를 할 수있는 완벽한 솔루션이 아니지만, 당신이 원하는 바로는 거의 다가 가고 있습니다.바람직 바람직 class

숨겨진 table 복제 할 바람직

1. 실물 table, id
2. td, id :

   는 I 4 개 인수 전체 함수로 만들어

3. 새로운 행 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