使用jQuery获取动态创建的多个选择框值
[英]get the dynamically created multiple select box values using jquery
问题描述
I have been reviewing a lot of pages about this and can't seem to figure out why this isn't working. 
我已经审查了很多关于此的页面，似乎无法弄清楚为什么它不起作用。
And I have a doubt in the section of,if i have multiple dynamically created select box and this selected values to be passed to the text box with some calculation before using jQuery. 我对以下部分有疑问，如果我有多个动态创建的选择框，并且此选择的值在使用jQuery之前经过一些计算将传递到文本框。 please help me i have tortured in this section. 请帮助我，我在本节中受到折磨。 In the below line of input.php have the html code of get the input. 在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;"> </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>
1 个解决方案
解决方案1
0 已采纳 2015-10-13 08:12:57
Firstly, it looks like you are trying to attach a change handler to a div . 首先，您似乎正在尝试将change处理程序附加到div 。 This is not possible. 这是不可能的。 From the documentation - 从文档中 -
The change event is sent to an element when its value changes.
<input>elements,<textarea>boxes and<select>elements.<input>元素，<textarea>框和<select>元素。
To get it to work you can change this - 要使其正常工作，您可以更改此设置-
$('.product-item').change(function() {
to - 至 -
$('.product-item select, .product-item input').change(function() {
Secondly, to handle dynamic rows you you need to use event delegation. 其次，要处理动态行，您需要使用事件委托。 Using .on you can apply the function to dynamic elements. 使用.on可以将功能应用于动态元素。 You will need to change the function to - 您需要将功能更改为-
$("#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>
Here I'm creating a variable ( $line ) to represent the row. 在这里，我正在创建一个变量（ $line ）来代表该行。 I can then use find to get the orderbox es for that row. 然后，我可以使用find来获取该行的orderbox 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.