获取动态创建的下拉列表的值

Question

我有一个按钮，每次单击它时，它都会在 table 中创建一个新行，并在其 ID 中自动递增。

实际HTML：

<select class="dynService" id="service_1" name="service[]">
<option value="1" data-price="100">Option 1</option>
<option value="2" data-price="150">Option 2</option>
</select>

<input type="text" id="price_1" name="servprice[]" value="" />

因此，下次我单击该按钮时，它将创建具有相同 HTML 的另一行，只是 service_1 和 price_1 将是 service_2 并且price_2.

我的问题是如何创建 "service_1" 的 onchange 以从 service_1 获取数据价格并将其放置到 price_1 但不更改 price_2 值，因为用户可以添加多行服务，但不固定。

谢谢

Answer 1

您可以使用 .on() 将事件附加到动态添加的元素。

额外维护数据序列以使您的工作更轻松。您可以执行以下操作：

$(document).ready(function () {
   $(document).on('change', '.dynService', function () {
      var _targetId = '#price_' + $(this).data('serial');
      $(_targetId).val($('option:selected', this).data('price'));
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dynService" id="service_1" data-serial="1" name="service[]">
  <option value="1" data-price="100">Option 1</option>
  <option value="2" data-price="150">Option 2</option>
</select>

<input type="text" id="price_1" name="servprice[]" value=""/>
   
<select class="dynService" id="service_2" data-serial="2" name="service[]">
  <option value="1" data-price="100">Option 1</option>
  <option value="2" data-price="150">Option 2</option>
</select>
    
<input type="text" id="price_2" name="servprice[]" value=""/>

获取动态创建的下拉列表的值

Get value of dynamically created dropdowns

jquery

select

onchange