Question

我一直在审查很多有关此问题的网页，似乎无法弄清楚为什么这不起作用。

我有一个疑问，如果我有多个动态创建的选择框，并且在使用jQuery之前将这些选定的值传递给文本框并进行一些计算。请帮助我，我在这部分遭受了折磨。在input.php的下面一行中有获取输入的html代码。

    function addMore() {
        $("<DIV>").load("input.php", function() {
                $("#product").append($(this).html());


        });

    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }

    $(document).ready(function() {
        $('.product-item').change(function()
           {

                var option1 =$(this).find('.orderbox1 option:selected').val();
                var option2 = $(this).find('.orderbox2 option:selected').val();
                option1 *= $(".orderbox3").val();
                option2 *= $(".orderbox3").val();
                $(".orderbox4").val(option1-option2);

        });
    }); 

    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM name="frmProduct" method="post" action="">
    <DIV id="outer">
    <DIV id="header">
    <DIV class="float-left" style="margin-left:150px;">&nbsp;</DIV>
    <DIV class="float-left col-heading">Choose Currency</DIV>
    <DIV class="float-left col-heading">Choose Product</DIV>
    <DIV class="float-left col-heading">Forex Amount</DIV>
    <DIV class="float-left col-heading">Rupee Amount</DIV>
    </DIV>
    <DIV id="product">

<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
<DIV class="float-left"> Choose Currency:
           <select  name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
            <option selected="selected">Select</option> 
             <option value="66">United States</option>
            <option value="75">European</option>
            <option value="12">Philippines</option>
            <option value="17">Qatar</option>

        </select></DIV>
<DIV class="float-left"> Choose Product:
                <select name="item_size[]" id="orderbox2" class="orderbox2">
                <option value="1" selected="selected">Select</option>
                <option value="10">Forex Card</option>
                <option value="20">Currency Notes</option>
                </select></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" id="orderbox3" class="orderbox3"/></DIV>
<DIV class="float-left"><input type="text" name="item_price[]" id="orderbox4" class="orderbox4"/></DIV>
</DIV>
    </DIV>
    <DIV class="btn-action float-clear">
    <input type="button" name="add_item" value="Add More" onClick="addMore();" />
    <input type="button" name="del_item" value="Delete" onClick="deleteRow();" />F
    <span class="success"><?php if(isset($message)) { echo $message; }?></span>
    </DIV>
    <DIV class="footer">
    <input type="submit" name="save" value="Save" />
    </DIV>
    </DIV>
    </FORM>

Answer 1

首先，您似乎正在尝试将change处理程序附加到div。这是不可能的。来自documentation -

更改事件在其值更改时发送到元素。此活动仅限于<input>元素，<textarea>框和<select>元素。

要让它发挥作用，你可以改变它 -

$('.product-item').change(function() {

到 -

$('.product-item select, .product-item input').change(function() {

其次，要处理动态行，您需要使用事件委派。使用.on可以将函数应用于动态元素。您需要将功能更改为 -

＆＃13;

$("#product").on('change', '.product-item select, .product-item input', function() {
  var $line = $(this).parents('.product-item');
  var option1 = $line.find('.orderbox1').val();
  var option2 = $line.find('.orderbox2').val();
  option1 *= $line.find(".orderbox3").val();
  option2 *= $line.find(".orderbox3").val();
  $line.find(".orderbox4").val(option1 - option2);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV id="product">
  <DIV class="product-item float-clear" style="clear:both;">
    <DIV class="float-left">
      <input type="checkbox" name="item_index[]" />
    </DIV>
    <DIV class="float-left">Choose Currency:
      <select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
        <option selected="selected">Select</option>
        <option value="66">United States</option>
        <option value="75">European</option>
        <option value="12">Philippines</option>
        <option value="17">Qatar</option>

      </select>
    </DIV>
    <DIV class="float-left">Choose Product:
      <select name="item_size[]" id="orderbox2" class="orderbox2">
        <option value="1" selected="selected">Select</option>
        <option value="10">Forex Card</option>
        <option value="20">Currency Notes</option>
      </select>
    </DIV>
    <DIV class="float-left">
      <input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
    </DIV>
    <DIV class="float-left">
      <input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
    </DIV>
  </DIV>
  <DIV class="product-item float-clear" style="clear:both;">
    <DIV class="float-left">
      <input type="checkbox" name="item_index[]" />
    </DIV>
    <DIV class="float-left">Choose Currency:
      <select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
        <option selected="selected">Select</option>
        <option value="66">United States</option>
        <option value="75">European</option>
        <option value="12">Philippines</option>
        <option value="17">Qatar</option>

      </select>
    </DIV>
    <DIV class="float-left">Choose Product:
      <select name="item_size[]" id="orderbox2" class="orderbox2">
        <option value="1" selected="selected">Select</option>
        <option value="10">Forex Card</option>
        <option value="20">Currency Notes</option>
      </select>
    </DIV>
    <DIV class="float-left">
      <input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
    </DIV>
    <DIV class="float-left">
      <input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
    </DIV>
  </DIV>
</DIV>
</DIV>

＆＃13;

我在这里创建一个变量（$line）来表示该行。然后我可以使用find获取该行的orderbox es。

使用jquery获取动态创建的多个选择框值

1 个答案: