Question

我有一个按钮，每次您单击它时，它会在表中创建一个新行，其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。

我的问题是如何创建onchange的“ service_1”以从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=""/>

获取动态创建的下拉菜单的价值

1 个答案: