Question

当我更改selectID（选择器）并需要更改其余输入值时，我正在用php while循环重复此div。但是selectID太多，因此需要循环使用多个值。

此处的HTML代码

<div id="addPart1">
   <div>
      <select id="selectID" name="item[]" required>
         <option>1</option>
         <option>2</option>
         <option>3</option>
      </select>
   </div>
   <div id="descID" name="item_note[]" form="partForm"></div>
   <div>
       <input type="number" id="priceID" name="price[]" form="partForm">
   </div>
   <div>
      <input type="number" id="qtyID" name="quantity[]" form="partForm">
   </div>
   <div>
      <input type="number" id="disID" name="discount[]" form="partForm">
   </div>
   <div>
      <input  type="text" id="amtID" name="amount[]" form="partForm">
   </div>
   <div>
      <input type="hidden" id="amt1ID" name="amount1[]" form="partForm">
   </div>
   <div>
      <input id="deleteLine" value='delete'/>
   </div>
</div>

此处的JavaScript代码

$(document).ready(function() {
   // need loop from here where '1' is attached with IDs need to be looped.
   $('#selectID1').on("change", (function() {
       selectedOption = $('option:selected', this);
       $('#priceID1').val(selectedOption.data('price'));
       $('#qtyID1').val(selectedOption.data('quantity'));
       $('#qtyID1').attr("title", selectedOption.data('quantity2'));
       $('#info').html(selectedOption.data('quantity2'));
       $('#disID1').val(selectedOption.data('discount'));
       $('#amtID1').val(selectedOption.data('amount'));
       $('#amt1ID1').val(selectedOption.data('amount1'));
   });
// end loop
});

Answer 1

尝试以下代码。 jQuery选择器[id^='selectID']将选择所有select以id开头的所有selectID元素。

$("[id^='selectID']").on("change", (function() {
    selectedOption = $('option:selected', this);
    var index = $(this).attr("id").replace("selectID", "");
    $('#priceID' + index).val(selectedOption.data('price'));
    $('#qtyID' + index).val(selectedOption.data('quantity'));
    $('#qtyID' + index).attr("title", selectedOption.data('quantity2'));
    $('#info').html(selectedOption.data('quantity2'));
    $('#disID' + index).val(selectedOption.data('discount'));
    $('#amtID' + index).val(selectedOption.data('amount'));
    $('#amt1ID' + index).val(selectedOption.data('amount1'));
});

编辑1

根据cars10m的建议进行了更新，并缩短了代码，如下所示。

$("[id^='selectID']").on("change", (function() {
    const data = $('option:selected', this).data();
    var index = $(this).attr("id").replace("selectID", "");
    $('#priceID' + index).val(data.price);
    $('#qtyID' + index).val(data.quantity);
    $('#qtyID' + index).attr("title", data.quantity2);
    $('#info').html(data.quantity2);
    $('#disID' + index).val(data.discount);
    $('#amtID' + index).val(data.amount);
    $('#amt1ID' + index).val(data.amount1);
});

如何在此jQuery代码中创建循环？

1 个答案: