我试图创建一个动态表单，允许用户选择选项，并在输入字段中自动填充价格，但不幸是，它只在第一个字段中工作，它在另一个添加字段中不工作。请帮助。
这是我的代码
<select class="form-control item" name="madic" id="medicine" required>
<option value="" selected >Select Madicine</option>
<?php
$query2 ="SELECT * FROM pharmacy WHERE Qty != '0'";
$result2 = $con->query($query2);
if($result2->num_rows> 0){
while($optionData1=$result2->fetch_assoc()){
$mid =$optionData1['p_id'];
$madicine =$optionData1['madicine'];
$mrate =$optionData1['mrate_price'];?>
?>
<option value="<?php echo $mid ?>" data-price=<?php echo $mrate; ?>><?php echo $madicine; ?></option>
<?php }} ?>
</select>
</div>
<div class="col col-md-2">
<input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly>
</div>
<div class="col col-md-1">
<input type="text" name="Qty[]" class="form-control Qty" value="1" id="Qty" >
</div>
<div class="col col-md-1">
<input type="text" name="mdiscount[]" class="form-control mdiscount" value="0" id="mdiscount" >
</div>
<div class="col col-md-2">
<input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." >
</div>
<div class="col col-md-1">
<button type="button" id="add" class="btn btn-success">+</button>
</div>查询
$('select[name="madic"]').change(mediSum);
function mediSum(){
var elemente = $('select[name="madic"]').find('option:selected');
var desc1 = Number(elemente.data("price"));
var rate2 = $('.mrate').val(desc1);
}
Here I have Appended
$(document).ready(function(){
var i = i;
$('#add').click(function(){
i++;
$('#mad').append('<div id="row'+i+'"><div class="col col-md-4"><select class="form-control medicine" name="madic[]" id="medicine" required><option value="" selected >Select Madicine</option><?php
$query2 ="SELECT * FROM pharmacy WHERE Qty != '0'";
$result2 = $con->query($query2);
if($result2->num_rows> 0){
while($optionData1=$result2->fetch_assoc()){
$mid =$optionData1['p_id'];
$madicine =$optionData1['madicine'];
$mrate =$optionData1['mrate_price'];?>
?><option value="<?php echo $mid ?>" data-price=<?php echo $mrate; ?>"><?php echo $madicine; ?></option><?php }} ?>
</select></div><div class="col col-md-2"><input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly></div><div class="col col-md-1"><input type="number" name="Qty[]" class="form-control Qty" value="1" id="Qty" ></div><div class="col col-md-1"> <input type="number" name="mdiscount[]" class="form-control discount" value="0" id="mdiscount" ></div><div class="col col-md-2"><input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." ></div><div class="col col-md-1"><button type="button" id="'+i+'" class="btn btn-danger remove_row">-</button></div></div>');
});
$(document).on('click','.remove_row', function(){
var row_id = $(this).attr('id');
$('#row'+row_id+'').remove();
});
});
$(document).ready(function(){
var i = i;
$('#add').click(function(){
i++;
$('#mad').append('<div id="row'+i+'"><div class="col col-md-4"><select class="form-control medicine" name="madic[]" id="medicine" required><option value="" selected >Select Madicine</option><option value="1" data-price="125">Amoxline1</option><option value="2" data-price="163">Amoxline2</option><option value="3" data-price="723">Amoxline3</option>
</select></div><div class="col col-md-2"><input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly></div><div class="col col-md-1"><input type="number" name="Qty[]" class="form-control Qty" value="1" id="Qty" ></div><div class="col col-md-1"> <input type="number" name="mdiscount[]" class="form-control discount" value="0" id="mdiscount" ></div><div class="col col-md-2"><input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." ></div><div class="col col-md-1"><button type="button" id="'+i+'" class="btn btn-danger remove_row">-</button></div></div>');
});
$(document).on('click','.remove_row', function(){
var row_id = $(this).attr('id');
$('#row'+row_id+'').remove();
});
});
$('select[name="madic"]').change(mediSum);
function mediSum(){
var elemente = $('select[name="madic"]').find('option:selected');
var desc1 = Number(elemente.data("price"));
var rate2 = $('.mrate').val(desc1);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- madicine row ----->
<div class="row col col-md-12 madi" id="mad" style="display: block;">
<br>
<div class="col col-md-4">
<select class="form-control item" name="madic" id="medicine" required>
<option value="" selected >Select Madicine</option>
<option value="1" data-price="125">Amoxline1</option>
<option value="2" data-price="163">Amoxline2</option>
<option value="3" data-price="723">Amoxline3</option>
<?php }} ?>
</select>
</div>
<div class="col col-md-2">
<input type="text" name="mrate[]" value="0" class="mrate form-control " id="mrate" readonly>
</div>
<div class="col col-md-1">
<input type="text" name="Qty[]" class="form-control Qty" value="1" id="Qty" >
</div>
<div class="col col-md-1">
<input type="text" name="mdiscount[]" class="form-control mdiscount" value="0" id="mdiscount" >
</div>
<div class="col col-md-2">
<input type="text" name="pack[]" class="form-control" placeholder="eg: Tab,box .." >
</div>
<div class="col col-md-1">
<button type="button" id="add" class="btn btn-success">+</button>
</div>
</div><!-- end medicines -->当我添加另一行时，当用户选择数据价格值显示在下一个输入字段中时，我想要的示例。
1条答案
按热度按时间9rygscc11#
你打电话来的时候
您已经指定了文档中存在的所有
select标记（当时），具有madic的name应该通过调用mediSum来处理change事件。但是，当以后创建这样的select时，它没有这个处理程序。因此，我建议将代码更改为：因此，具有
madic的name的任何select标签未被初始化（我们知道它们还没有initializedclass）将与给定的change处理程序关联，并将接收initializedclass。现在，你有一个动态添加类似的select标签的特性。这些新标签将没有initialized类，所以当add事件发生时运行上面建议的相同代码应该可以解决你的问题。