当用户从选择框中选择选项时更改输入字段的值
Posted
技术标签:
【中文标题】当用户从选择框中选择选项时更改输入字段的值【英文标题】：Changing the value of Input field when user select option from select box 【发布时间】：2015-03-24 17:13:44 【问题描述】：我正在开发发票模块。我有一个使用 ajax 生成新行的按钮，并且所有字段都具有相同的名称，就像第一个字段的名称是 field1 一样，对于所有新生成的行，它将保持为 field1。而且我还有一个选择框，其产品名称显示数据库（mysql）中的选项，因此当用户从选择菜单中选择一个选项（产品）时，我想在输入字段上打印它的价格。我有这个 ajax 脚本。第一行工作正常。但是当我生成一个新行并从选择框中选择一个选项时，它不适用于该行。当我从第一行更改选择选项时，它会更改所有输入字段的值。我不知道ajax，所以不知道如何解决这个问题。请查看并告诉我如何解决此问题。
<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>
附：这里我自己编写所有字段，但我使用的是自动生成脚本。
【问题讨论】：
你的 pname 类在哪里？而且你还写了 var id=$(this).val();它在哪里？ 试试这个$(document).on('change', '.pname', function() 而不是$(".pname").change(function()
对不起，这不是同样的问题。更改所有输入字段值..
【参考方案1】：
问题不在于您的 ajax 请求，而在于您使用的 jquery 选择器。在 jquery 中，$('.value') 表示所有具有类“值”的 DOM 元素。所以$(".price") 将选择所有具有“价格”类的元素，但我看不到它们中的任何一个。要按名称选择某项内容，您必须使用$('input[name=price]')。这将选择名称为“price”的所有输入。要选择名称以 price 开头的所有输入，请使用 $('input[name^=price]')。您的问题的解决方案可能是将 SELECT 和 INPUT 元素放在一个容器中，并仅选择对应的 INPUT。
<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/
【讨论】：
它不工作的伙伴：/你能自己试试吗？ @HafizAbdullahMajid：你检查过小提琴吗？它对你有用吗？ @HafizAbdullahMajid：接受我的回答将非常感谢。 :) 嘿兄弟@Fenistil！您的脚本运行良好。但是现在我添加了一个克隆选项来生成新的 div，脚本适用于原始 div，但不适用于克隆的 div。请告诉我脚本有什么问题谢谢:) 克隆脚本，'模板'是 div @HafizAbdullahMajid：问题在于，您在document.ready 中分配了change 事件，这意味着只有那些DOM 元素具有此事件，该事件在加载文档时存在。如果您克隆某些东西，您也应该将更改事件分配给新对象。为此，将更改事件设置为外部函数（如OnSelectChange）并将其分配到document.ready 和克隆之后也是一个好习惯。例如：$("select[name^=pro_name]").change(OnSelectChange);以上是关于当用户从选择框中选择选项时更改输入字段的值的主要内容，如果未能解决你的问题，请参考以下文章
从通过 d3.js 创建的下拉选择框中选择一个选项时，发送到按钮的值变为未定义
easyui中combobox 验证输入的值必须为选项框中的数据