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

等等。

现在我有一个脚本将绑定到种类选择框的更改事件，并相应地将值附加到值选择框：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

在动态加载的多选框中填充值

1 个答案: