依存するドロップダウンはwhileループ内では機能しません

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>"; 

私は2つのドロップダウンを持つ 'n'個の行を出力するphpテーブルを持っています。上記のコードセクションは、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; 
} 

--EDIT--

$(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

これはすべて整合素子に解決しようとしています。

$remarks = $(".remarks"); 

これは、ページが読み込まれてから、いつものすべてので動作しています。代わりに、その行を完全に削除し、イベントのソースを開始点として使用して、イベントが発生したときに探している特定の要素を見つけます。

おそらく、このような何か：

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

アイデアは（changeイベントが発生したとき、あなたは（イベントをトリガ要素である）thisから開始し、共通の親要素にDOMを横断していることですあなたのHTMLがおそらく<tr>である場合）、特定のターゲット.remarks要素がその親の中に具体的に含まれています。