当用户从选择框中选择选项时更改输入字段的值答案

【问题标题】：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(){
对不起，这不是同样的问题。更改所有输入字段值..

标签： php mysql ajax

【解决方案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);