Thay đổi giá trị của trường Nhập khi người dùng chọn tùy chọn từ hộp chọn

Vấn đề không phải là với yêu cầu ajax của bạn, mà là với các bộ chọn jquery mà bạn sử dụng. Trong jquery $('.value') có nghĩa là tất cả các phần tử DOM với một "giá trị" của lớp. Vì vậy, $(".price") sẽ chọn TẤT CẢ các phần tử với một lớp "giá", nhưng tôi không thấy bất kỳ phần tử nào trong số đó. Để chọn một cái gì đó theo tên của nó, bạn phải sử dụng $('input[name=price]') . Thao tác này sẽ chọn tất cả các đầu vào có tên "giá". Để chọn tất cả các đầu vào có tên bắt đầu bằng giá, hãy sử dụng $('input[name^=price]') . Giải pháp cho vấn đề của bạn có lẽ là đặt phần tử SELECT và INPUT vào một vùng chứa và chỉ chọn INPUT tương ứng.

<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>

Fiddle: http://jsfiddle.net/8rsxay8q/1/