循环时，依赖的下拉列表无法内部工作

Question

    echo "<select name = error_type id='error_type$rowIndex' name='error_type$rowIndex' class='error_type'>
    <option value= >Select Type</option>
      <option value=Category1>Category1</option>
      <option value=Category2>Category2</option>
      </select>
    </td><td>
   <select disabled=disabled id='remarks$rowIndex' name='remarks$rowIndex' class='remarks'>
    <option value= >Select Subtype </option>
    <option rel='Category1' value='Subcategory1.1'>Subcategory1.1</option>
    <option rel='Category1' value='Subcategory1.2'>Subcategory1.2</option>
    <option rel='Category1' value='Subcategory1.3'>Subcategory1.3</option>
    <option rel='Category2' value='Subcategory2.1'>Subcategory2.1</option>
    <option rel='Category2' value='Subcategory2.2'>Subcategory2.2</option>
    <option rel='Category2' value='Subcategory2.3'>Subcategory2.3</option>                      
    </select>";

我有一个PHP表，该表输出" N"的行数，每行，带有2个下拉列表。代码的上面部分仅适用于PHP表的第一行，但是当更改下一行时，第一行的子类别也会更改。我如何使单个行独立起作用。

JS是

    $(function(){
    var $error_type = $(".error_type"),
        $remarks = $(".remarks");
    $error_type.on("change",function(){
        var _rel = $(this).val();
        $remarks.find("option").attr("style","");
        $remarks.val("");
        if(!_rel) return $remarks.prop("disabled",true);
        $remarks.find("[rel="+_rel+"]").show();
        $remarks.prop("disabled",false);
    });
});

CS是

.remarks option{
    display:none;
}
.remarks option.label{
    display:block;
}

- 编辑 -

$(function(){
    var $error_type = $(".error_type"),
        $remarks = $(".remarks");
    $error_type.on("change",function(){
        var $remarks = $(this).closest("tr").find(".remarks");
        var _rel = $(this).val();
        $remarks.find("option").attr("style","");
        $remarks.val("");
        if(!_rel) return $remarks.prop("disabled",true);
        $remarks.find("[rel="+_rel+"]").show();
        $remarks.prop("disabled",false);
    });
});

Answer 1

这将解析为 all 匹配元素：

$remarks = $(".remarks");

您正在加载页面时一次这样做，然后始终在这些元素的所有上操作。取而代之的是，完全删除该行，并在事件发生时找到您要查找的特定元素，将事件的源用作起点。

也许这样的东西：

$error_type.on("change", function(){
    var $remarks = $(this).closest("tr").find(".remarks");
    // the rest of your handler code
});

这个想法是，当change事件发生时，您是从this开始的（这是触发事件的元素），将DOM穿过DOM到共同的父元素（给定可能是<tr>的HTML），然后找到特定的特定目标.remarks元素（s）特别包含在该父母中。