当用户从选择框中选择选项时更改输入字段的值 - Changing the value of Input field when user select option from select box

Changing the value of Input field when user select option from select box

我正在处理发票模块。在那里，我有一个使用 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>

附言在这里我自己编写所有字段，但我使用的是自动生成脚本。

问题不在于你的 ajax 请求，而在于你使用的 jquery 选择器。在jquery中，$('.value')表示所有带有类"值"的DOM元素。因此，$(".price")将选择所有带有"价格"类的元素，但我看不到任何一个。要按名称选择某些内容，您必须使用 $('input[name=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/