javascript - 用于获取所有下拉列表值的 Jquery 选择器，2 个下拉列表的问题

Question

HTML 表格

Row#1 : Col 1 [Country DropDown] | Col #2 [StateDropDown]

Row#2 : Col 1 [Country DropDown] | Col 2 [StateDropDown]

表格有 2 个下拉列表，分别用于国家和州 - 这适用于一个下拉列表，但它会禁用其他/州下拉列表还有!

问题是，虽然美国和澳大利亚都选择了不同的州文本，但在col2中最终具有相同> 选定的 State ID/值 3 (如果我选择加利福尼亚州，珀斯也被禁用!，因此我的代码将它们作为重复项禁用，因为它比较选定的值而不是文本)例如此选择禁用珀斯..

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

如何将每行中的国家/地区和州的唯一组合做到这一点？或者只是比较下拉菜单的文本？...

1. 即选项1，如何检查国家/地区 ID + 州 ID 值是否已存在？
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('option[value=' + selectedValue + ']').prop('disabled', 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

这不是一个完美的解决方案，您只需复制/粘贴即可，但它非常接近您想要的。

我将它作为一个带有 4 个参数的完整函数:

1. 真正的表，最好是id
2. td，最好是一个类
3. 要克隆的隐藏表，最好是id
4. 新行按钮，最好是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