javascript - 在动态加载的多个选择框中填充值

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

依此类推。

现在我有一个脚本，它将绑定(bind)到类型选择框的更改事件，并相应地将值附加到值选择框:

现在的问题是我需要某种方法以迭代方式运行脚本，当我对第一个 block 进行更改时，效果也应该只在第一个 block 上。另外，我正在寻找一种方法来检测没有多个属性的选择框的更改。

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