この行のクラスのみを選択してください - Jquery

Question

従属ドロップダウンを使用しています。どちらがうまく動作するかは、 ですが、必要に応じてさらに多くの行を追加できるようにテーブルに入れておきます。

問題は、クラスを使用してドロップダウンを選択しているため、現在の行だけでなくすべてのドロップダウンにオプションが追加されていることです。

$(".quote_product").append(option);

メイン犯罪者であり、私が使用しようとしている：

$(this).closest('tr').find(".quote_product").append(option);

が、これは空白の出力になります。

私の他の考えは、テーブル行の例＃quote_product_1などを使用してIDを適用することでしたが、試してみるとインデックス（-1）が得られました。

HTML以下のように： `

<tr> 
    <td>1</td> 
    <td> 
    <select class="form-control quote_category"> 
     <option value="">--Select--</option> 
    </select> 
    </td> 
    <td> 
    <select class="form-control quote_product"> 
     <option value="">--Select--</option> 
    </select> 
    </td> 
    <td> 
    <input type="input" name="quote_width" class="form-control quote_width" id="" placeholder="0.00" disabled="" /> 
    </td> 
    <td> 
    <input type="input" name="quote_qty" class="form-control quote_qty" id="" placeholder="1.00" /> 
    </td> 
</tr> 


<tr> 
    <td>2</td> 
    <td> 
    <select class="form-control quote_category"> 
     <option value="">--Select--</option> 
    </select> 
    </td> 
    <td> 
    <select class="form-control quote_product"> 
     <option value="">--Select--</option> 
    </select> 
    </td> 
    <td> 
    <input type="input" name="quote_width" class="form-control quote_width" id="" placeholder="0.00" disabled="" /> 
    </td> 
    <td> 
    <input type="input" name="quote_qty" class="form-control quote_qty" id="" placeholder="1.00" /> 
    </td> 
</tr> 


<tr> 
    <td>3</td> 
    <td> 
    <select class="form-control quote_category"> 
     <option value="">--Select--</option> 
    </select> 
    </td> 
    <td> 
    <select class="form-control quote_product"> 
     <option value="">--Select--</option> 
    </select> 
    </td> 
    <td> 
    <input type="input" name="quote_width" class="form-control quote_width" id="" placeholder="0.00" disabled="" /> 
    </td> 
    <td> 
    <input type="input" name="quote_qty" class="form-control quote_qty" id="" placeholder="1.00" /> 
    </td> 
</tr> 

Answer 1

私はあなたが特定のドロップダウンリストをターゲットにしようとしている場合は、交差点の選択を使用しなければならないと考えています。たとえば
：

$(this).closest('tr').find('.form-control.quote_product').append(option); 

Answer 2

あなたが提供する、または新しいオプションを追加トリガするために起こっているのメカニズムについて語ってくれたので、完全な答えはできませんしていません。

しかし、それはあなたがそれを追加したい選択と同じtrにあるように見えますか？その場合、$(this).closest('tr').find(".quote_product").append(はうまく動作します。

右端のテキストボックスのいずれかをクリックすると、現在の行にオプションを追加するデモがあります。あなたは、ボタンまたはその行に置いたものにイベントを再配線する必要があります。