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>');