получить динамически созданные несколько значений окна выбора с помощью jquery

Я просматривал много страниц об этом и не могу понять, почему это не работает.получить динамически созданные несколько значений окна выбора с помощью jquery

И у меня есть сомнения в разделе, если у меня есть несколько динамически созданных полей выбора, и это выбранные значения будут переданы в текстовое поле с некоторыми вычислениями перед использованием 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>

источник

2015-10-13 navaskhan

пожалуйста, помогите мне .. – navaskhan

Во-первых, это выглядит, как вы пытаетесь прикрепить change обработчик к div. Это невозможно. От documentation -

Событие изменения отправляется элементу при изменении его значения. Это событие ограничено <input> элементами, <textarea> боксами и <select> элементами.

Чтобы заставить его работать, вы можете изменить это -

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

к -

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

Во-вторых, для обработки динамических строк вы нужно использовать делегирование событий. Используя .on, вы можете применить эту функцию к динамическим элементам. Вам нужно будет изменить функцию -

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

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

Здесь я создаю переменную ($line), чтобы представить строку. Затем я могу использовать find для получения orderbox es для этой строки.

источник

2015-10-13 08:12:57

@navaskhan взгляните на мой обновленный ответ. –

@navaskhan вы уже добавили инструкцию '.on'? –

ya great man..s работает спасибо за все .. вы проделали отличную работу. @ John – navaskhan

получить динамически созданные несколько значений окна выбора с помощью jquery

ответ

Смежные вопросы