在動態加載的多個選擇框中填充值

Question

我有一個Symfony2應用程序，我在其中使用jQuery將選定的框動態添加到頁面中。 我單擊添加更多，並添加2個帶有以下ID的選擇框：

#taskbundle_product_values_1_kind
#taskbundle_product_values_1_values

再次點擊：

#taskbundle_product_values_2_kind
#taskbundle_product_values_2_values

等等等等。

現在，我有了一個腳本，它將綁定到種類選擇框的change事件，並相應地將值附加到值選擇框：

現在的問題是，我需要某種方式來迭代運行腳本，以便在更改第一個塊時，效果也應該只出現在第一個塊上。 而且我也在尋找一種方法來檢測沒有多個屬性的選擇框的更改。

  $('body').on('change', '#select select', function() { alert("Yahoo"); //console.log("Yahoo"); var val = $(this).val(); var $valSelect = $(this).next("select").html(''); $valSelect.append('<option value="value">Value</option>'); //alert(val); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="/product/" method="post"> <div> <label for="webmuch_taskbundle_product_name" class="required">Name</label> <input type="text" id="webmuch_taskbundle_product_name" name="webmuch_taskbundle_product[name]" required="required" maxlength="255"> </div> <div id="select"> <ul class="values"> <li> <div id="webmuch_taskbundle_product_values_1"> <div> <label for="webmuch_taskbundle_product_values_1_kind" class="required">Kind</label> <select id="webmuch_taskbundle_product_values_1_kind" name="webmuch_taskbundle_product[values][1][kind]" required="required"> <option value="" selected="selected">-----Select Kind-----</option> <option value="2">Size</option> <option value="3">Shape</option> <option value="4">Weight</option> </select> </div> <div> <label for="webmuch_taskbundle_product_values_1_values">Values</label> <select id="webmuch_taskbundle_product_values_1_values" name="webmuch_taskbundle_product[values][1][values][]" multiple="multiple"> <option value="4">small</option> <option value="5">medium</option> <option value="6">large</option> <option value="7">v-neck</option> <option value="8">round-neck</option> <option value="9">collor</option> <option value="10">light</option> <option value="11">middle</option> <option value="12">heavy</option> </select> </div> </div> </li> <li> <div id="webmuch_taskbundle_product_values_2"> <div> <label for="webmuch_taskbundle_product_values_2_kind" class="required">Kind</label> <select id="webmuch_taskbundle_product_values_2_kind" name="webmuch_taskbundle_product[values][2][kind]" required="required"> <option value="" selected="selected">-----Select Kind-----</option> <option value="2">Size</option> <option value="3">Shape</option> <option value="4">Weight</option> </select> </div> <div> <label for="webmuch_taskbundle_product_values_2_values">Values</label> <select id="webmuch_taskbundle_product_values_2_values" name="webmuch_taskbundle_product[values][2][values][]" multiple="multiple"> <option value="4">small</option> <option value="5">medium</option> <option value="6">large</option> <option value="7">v-neck</option> <option value="8">round-neck</option> <option value="9">collor</option> <option value="10">light</option> <option value="11">middle</option> <option value="12">heavy</option> </select> </div> </div> </li> <li><a href="#" class="add_value_link">Add a value</a> </li> </ul> </div> <div> <label class="required">Values</label> <div id="webmuch_taskbundle_product_values" data-prototype=""></div> </div> <div> <button type="submit" id="webmuch_taskbundle_product_submit" name="webmuch_taskbundle_product[submit]">Create</button> </div> <input type="hidden" id="webmuch_taskbundle_product__token" name="webmuch_taskbundle_product[_token]" value="IRD3S7rLy-SQPAxyfMZNQ5UU05RR8qmVPXSrPe6Hnig"> </form> 

Answer 1

.html（）返回字符串，而不是jQuery對象

你可能想要

var $valSelect = $(this).next("select");
$valSelect.html('<option value="value">Value</option>');

要么

var $valSelect = $(this).next("select");
$valSelect.empty().append('<option value="value">Value</option>');