用户从选择框中选择选项时更改输入字段的值 [英] Changing the value of Input field when user select option from select box
问题描述
我正在开发发票模块.我有一个使用ajax生成新行的按钮，所有字段的名称相同，例如，如果第一个字段的名称为field1，则对于所有新生成的行，它将保留为field1.而且，我还有一个选择框，其产品名称显示了来自数据库(mysql)的选项，因此当用户从选择菜单中选择一个选项(产品)时，我想在输入字段上打印价格.我有这个ajax脚本.第一行工作正常.但是，当我生成新行并从选择框中选择一个选项时，该行将不起作用.当我从第一行更改选择选项时，它会更改所有输入字段的值.我不知道ajax，所以不知道该如何解决.请查看并告诉我如何解决此问题.
I am working on an invoice module. There I have a button that generate new row using ajax and from this all fields have the same name like if the name of first field was field1 it will remain field1 for all new generated rows. And I have also one select box having product names that shows option from database (mysql) so when user select an option (product) from the select menu I want to print it's price on the input field. I have this ajax script. It's working fine for the first row. But when I generate a new row and select an option from the select box it doesn't work for that row. And when I change the select option from 1st row its change the value of all input fields. I don't know ajax so don't know how can I resolve this. Please have a view and tell me how can I resolve this problem.
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$(".pname").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_price.php",
data: dataString,
cache: false,
success: function(html)
{
$(".price").val(html);
}
});
});
});
</script>
</head>
<body>
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>
<input type='text' name='price[]'>
<br />
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>
<input type='text' name='price[]'>
<br />
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>
<input type='text' name='price[]'>
<br />
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>
<input type='text' name='price[]'>
<br />
</body>
</html>
P.S.在这里，我自己编写了所有字段，但我使用的是自动生成的脚本.
P.S. here I write all fields myself but I am using an auto generating script.
推荐答案
问题不在于您的ajax请求，而在于您使用的jquery选择器.在jquery中， $('.value')表示所有具有值"类的DOM元素.因此， $(.price")将选择具有价格"类的所有元素，但我看不到它们中的任何一个.要选择名称，您必须使用 $('input [name = price]').这将选择名称为"price"的所有输入.要选择所有名称以价格开头的输入，请使用 $('input [name ^ = price]').解决您的问题的方法可能是将SELECT和INPUT元素放入容器中，然后仅选择对应的INPUT.
The problem is not with your ajax request, but with the jquery selectors you use. In jquery $('.value') means all DOM elements with a class "value". So $(".price") will select ALL elements with a class "price", but I don't see any of them. To select something by its name you have to use $('input[name=price]'). This will select all inputs with the name "price". To select all inputs which name starts with price, use $('input[name^=price]'). The solution to your problem probably to put the SELECT and the INPUT element in a container, and select the correspondig INPUT only.
<div>
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>
<input type='text' name='price[]'>
</div>
<div>
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>
<input type='text' name='price[]'>
</div>
<script type="text/javascript">
var $last_select = null;
$(document).ready(function(){
$("select[name^=pro_name]").change(function(){
$last_select = $(this);
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_price.php",
data: dataString,
cache: false,
success: function(html)
{
$('input[name^=price]', $last_select.parent()).val(html);
}
});
});
});
</script>
提琴: http://jsfiddle.net/8rsxay8q/1/
这篇关于用户从选择框中选择选项时更改输入字段的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
