根据动态添加/删除html表单中的下拉选择填充HTML文本框值
根据动态添加/删除html表单中的下拉选择填充HTML文本框值
提问于 2022-11-24 02:28:37
**问题陈述：**：我有一个下拉菜单，名为汽车，输入文本框命名为价格。如果输入值为1，数据将被正确显示，例如输入选择为沃尔沃，显示为125000000，但当我单击Add按钮向html表单添加新行时，如果这次选择Audi，所有文本框值都将更改为185000000。如果有人在这方面给我指点的话，那会很有帮助的。
GUI
** GUI-2**
现在，当我从下拉列表中选择一个不同的值时，所有的值都会被更改。我只希望显示特定的选项值。
代码- JQUERY
$(document).on('change', 'select[name="cars[]"]', function() {
var total = 0;
$('select[name="cars[]"]').each(function() {
//total += parseInt($(this).val());
var get_cars = $(this).val();
if (get_cars == 'volvo') {
$(price).val(125000000);
} else if (get_cars == 'saab') {
$(price).val(145000000);
} else if (get_cars == 'mercedes') {
$(price).val(165000000);
} else if (get_cars == 'audi') {
$(price).val(185000000);
}
});
});代码- HTML
<td><select class="form-control" name="cars[]" id="cars">
<option value="" disabled selected>--Select--</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
<td><input class="form-control price" type="text" name="price[]" id="price" required=""></td>**当前输出：**-如果输入值为1，数据将得到正确显示，例如输入选择为沃尔沃，显示为125000000，但当-我单击Add按钮向html表单添加新行时，如果这次选择Audi，所有文本框值都将更改为185000000。
预期结果：如果我点击沃尔沃-它将显示为125000000，如果我点击奥迪，它将显示为185000000，我附加完整的代码，以供参考。
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var html = '<tr><td><input class="form-control" type="text" name="txtFullname[]" required=""></td><td><input class="form-control" type="text" name="txtEmail[]" required=""></td><td><input class="form-control" type="text" name="txtPhone[]" required=""></td><td><input class="form-control" type="text" name="txtAddress[]" required=""></td><td><select class="form-control" name="cars[]" id="cars"><option value="" disabled selected>--Select--</option><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select></td><td><input class="form-control price" type="text" name="price[]" id="price" required=""></td><td><input class="btn btn-danger" type="button" name="remove" id="remove" value="Remove" required=""></td></tr>';
var x = 1;
var max = 5;
$("#add").click(function() {
if (x <= max) {
$("#table_field").append(html);
x++
}
});
$("#table_field").on('click', '#remove', function() {
$(this).closest('tr').remove();
x--;
});
});
$(document).on('change', 'select[name="cars[]"]', function() {
var total = 0;
$('select[name="cars[]"]').each(function() {
//total += parseInt($(this).val());
var get_cars = $(this).val();
if (get_cars == 'volvo') {
$(price).val(125000000);
} else if (get_cars == 'saab') {
$(price).val(145000000);
} else if (get_cars == 'mercedes') {
$(price).val(165000000);
} else if (get_cars == 'audi') {
$(price).val(185000000);
}
});
});
</script>
</head>
<body>
<div class="container">
<form class="insert-form" id="insert_form" method="post" action="">
<hr>
<h1 class="text-center">Dynamically add input field & insert data</h1>
<hr>
<div class="input-field">
<table class="table table-bordered" id="table_field">
<tr>
<th>Full Name</th>
<th>Email Address</th>
<th>Phone No</th>
<th>Address</th>
<th>Cars</th>
<th>Price</th>
<th>Add or Remove</th>
</tr>
<tr>
<td><input class="form-control" type="text" name="txtFullname[]" required=""></td>
<td><input class="form-control" type="text" name="txtEmail[]" required=""></td>
<td><input class="form-control" type="text" name="txtPhone[]" required=""></td>
<td><input class="form-control" type="text" name="txtAddress[]" required=""></td>
<td><select class="form-control" name="cars[]" id="cars">
<option value="" disabled selected>--Select--</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
<td><input class="form-control price" type="text" name="price[]" id="price" required=""></td>
<td><input class="btn btn-warning" type="button" name="add" id="add" value="Add" required=""></td>
</tr>
</table>
<center>
<input class="btn btn-success" type="submit" name="save" id="save" value="Save Data">
</center>
</div>
</form>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-24 03:44:30
在您的示例中，使用了price中的$(price).val(125000000)，但没有定义。我建议像这样遍历DOM：
$(this).parent().parent().find('.price').val(125000000)
另外，在每一行中都重用相同的id。如果您需要ids，请使它们是唯一的，例如添加行号。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74554969
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号