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

Question

我正在开发发票模块。 我有一个使用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>

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

Answer 1

问题不在于您的ajax请求，而是您使用的jquery选择器。 在jquery中， $('.value')表示所有具有“值”类的DOM元素。 因此， $(".price")将选择所有带有“ price”类的元素，但我看不到它们中的任何一个。 要选择名称，您必须使用$('input[name=price]') 。 这将选择所有名称为“ price”的输入。 要选择所有以价格开头$('input[name^=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 个解决方案

解决方案1
0 已采纳 2015-01-26 10:07:40

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-26 10:07:40

解决方案1
0 已采纳 2015-01-26 10:07:40