Populate Values in Dynamically Loaded Multiple Select Boxes

Question

I have a Symfony2 application, where I am adding selected boxes to the page dynamically using jQuery. I click add more and 2 select boxes are added with the following IDs:

#taskbundle_product_values_1_kind
#taskbundle_product_values_1_values

another click:

#taskbundle_product_values_2_kind
#taskbundle_product_values_2_values

so on and so forth.

Now I have a script that will bind to the change event of the kind select boxes and accordingly attach values to the values select box:

Now the problem is that I need some way to run the script in an iterative way that when I make changes to the first block, the effect should also only be on the first block. and Also I am looking for a way to detect changes on select boxes without multiple attribute.

  $('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() returns a string and not a jQuery object

You likely want

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

or

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