从具有两个下拉列表的表行中，获取选定的值以及更改了哪个下拉列表

Question

我正在尝试更新表格内的两个级联下拉菜单在SO 上有很多关于下拉菜单的答案，但我无法在cascading updates 的Table 内找到帮助dynamically added rows。

鉴于许多行，它们都有不同的 ID，filter #Id 不起作用。那么，我如何识别 哪些行 Dropdown 触发了更改 & 在同一行的下一个列中级联更新另一个 Dropdown/单元？

表格行单元格中有 2 个DropDownList（选择框）。为了简化这一点，第一个是Country -> 第二个是state。因此，用户需要先选择国家，然后再选择州。

---

我的伪算法：

• 找出哪一个被解雇了，以及哪一行（不确定是否需要，我应该在适当的位置接线）
• 然后触发 ajax 调用...以获取基于国家/地区的值
• 使用同一表格行中的值更新第二个下拉列表。
• 案例1改变国家然后改变状态。
• 案例2只需更改状态，但首先在同一行的第一个下拉菜单中获取国家/地区值。

---

我知道如何在常规页面中获取更改和值，但是如何获取这些更改并更新相邻的下拉列表。

$(document).on('change', 'select', function(){
      var data = $(this).val();
      alert(data);
});

---

编辑，斯蒂芬请求显示 HTML

<tr>
  <td>
    //DropDown 1 (Imagine Country)
    <span class="projectcodeid"> 
      <select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"><option value=""></option>
       <option value="1">Plumbing</option>
       <option value="2">Modeling</option>
      </select></span>                                                    
  </td>

  <td>
    //DropDown 2 (Imagine State)
    <input type="hidden" name="Records.Index" value="1">
    <input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5">                                                    
    <span class="timecode timecodeDdlId"> <select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"><option value=""></option>
</select></span>
    </td>

    <td>
        <input name="Records[1].DataRecords[0].ID" type="hidden" value="">
        <input class="hours" name="Records[1].DataRecords[0].Work" type="text" value="">
    </td>                                                

    <td>
       <input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
    </td>
 </tr>

---

用于说明的示例图片

Answer 1

假设您无法按类别或任何内容识别 dropdwn。 假设每次更改下拉列表中的值时，您都希望更新同一行上的 其他 下拉列表。 假设每行只有两个下拉菜单：

$('table').on('change', 'select', function() {
    var $current_dropdown = $(this),
        $other_dropdown = $(this).closest('tr').find('select').not(this);

    /// perform any task you need with current and other dropdown

});

Answer 2

您需要为您的<select> 元素提供类名并使用相对选择器来选择同一行中的关联元素。

假设你的 html 是

<table id="table"> // give this an id attribute
    <tbody>
        <tr>
            <td><select class="country" ....> ..... </select></td>
            <td><select class="state" ....> ..... </select></td>
        </tr>
    </tbody>
</table>

那么你的脚本将是

$('#table').on('change', '.country', function() {
    var selectedValue = $(this).val();
    var row = $(this).closest('tr'); // get the row
    var stateSelect = row.find('.state'); // get the other select in the same row
    // make you ajax call passing the selectedValue to your controller
    // in the success callback, update the options of stateSelect 
    $.ajax({
        url: ...
        data { id: selectedValue },
        ....
        success: function(data) {
            stateSelect.empty();
            $.each(data, function(item, index) {
                stateSelect.append($('<option></option>').val(iem.ID).text(item.Name));
            }
        }
    });
}

另请参阅better way to load 2 dropdown in mvc 以获取用于填充级联下拉列表的代码的详细信息（考虑按照第二个代码示例缓存选项以避免重复的 ajax 调用）