Question

我正在处理发票模块。在那里，我有一个使用ajax生成新行的按钮，并且所有字段都具有相同的名称，如果第一个字段的名称是field1，它将保留所有新生成的行的field1。我还有一个选择框，其产品名称显示来自数据库（mysql）的选项，因此当用户从选择菜单中选择一个选项（产品）时，我想在输入字段上打印它的价格。我有这个ajax脚本。它在第一行工作正常。但是当我生成一个新行并从选择框中选择一个选项时，它对该行不起作用。当我从第1行更改select选项时，它会更改所有输入字段的值。我不知道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>

P.S。我自己写了所有字段，但是我使用的是自动生成脚本。

Answer 1

问题不在于您的ajax请求，而在于您使用的jquery选择器。在jquery中$('.value')表示具有类“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/

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

1 个答案: