Javascript 如何在动态行输入字段中从数据库中获取所选产品的价格？

我正在表单中设置一个动态行。需要从选择下拉列表中获取产品的价格

产品下拉列表中已经填充了数据库中的值

<?php 
function fill_unit_select_box($con){
    $output ='';
    $query = "SELECT * FROM pricelist";
    $result = $con->query($query);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
        $output .= '<option value="'.$row["product"].'">'.$row["product"].'</option>';
        }
        return $output;
    }
}
?>

<div class="form-body pal">
    <div class="row">
        <div class="col-md-12 col-md-offset-10">
            <div class="form-group">
                <button type="button" class="btn btn-info add-new-product_record_details"><i class="fa fa-plus"></i> Add Product</button>
            </div>
        </div>
    </div>
</div>
<div class="form-body pal">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover add_row" id="product_record_details">
                        <thead>
                            <tr>
                                <th class="success text-center">Product<span class='require'>*</span></th>
                                <th class="success text-center">Price<span class='require'>*</span></th>
                                <th class="success text-center">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-body pal">
    <div class="col-md-10 col-md-offset-10">
        <div class="form-group">
            <input type="hidden" id="main_product_name"/>
            <input type="hidden" id="main_row_product_count"/>
            <input type="hidden" name="submit_product_creation" class="btn btn-primary">
            <button type="submit" name="product_creation" id="product_creation" class="btn btn-primary"><i class="fa fa-arrow-right"></i> Save</button>
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
    // Append table with add row form on add new button click
        $(".add-new-product_record_details").click(function(){
            //$(this).attr("disabled", "disabled");
            var index = $("#product_record_details tbody tr:last-child").index();
            // Random value has generated to set the unique id value of the table
            var randaom_val = Math.floor(Math.random() * 100000000)
            var row_index = index+randaom_val;
            var row = '<tr>' +
                '<td><select name="product_id[]"  id="product_id'+row_index+'" onchange="fetch_product_price(this.id,'+row_index+')" class="select_format form-control"><option value="">Select</option><?php echo fill_unit_select_box($con); ?></select></td>'+
                '<td><input type="number" name="alead_price[]" id="alead_price'+row_index+'" placeholder="Price"  class="form-control"/></td>' +
        '<td><input type="number" name="aquantity[]" id="aquantity'+row_index+'" placeholder="Price"  class="form-control"/></td>' +
                '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' +
                '</tr>';
            $("#product_record_details").append(row);
            $(".select_format").select2({
                width: 'resolve'
            });
            // $("#main_spare_record_details tbody tr").eq(index + 1).find(".add, .edit").toggle();
            $("#product_record_details tbody tr").eq(index + 1).find("").toggle();
        });
        // Delete row on delete button click
        $(document).on("click", ".delete", function() {
            $(this).parents("tr").remove();
            //$(".add-new").removeAttr("disabled");
        });
    });
</script>

<script>
    function fetch_product_price(product_id,row_count) {
        var test = $('.select_format').val();
        // alert(test);
        $('#main_product_name').val($('#'+spare_id).val());
        $('#main_row_product_count').val(row_count);
    }
</script>

我需要什么

所以一旦改变了产品，它应该从数据库中获取产品的价格

<?php 
function fill_unit_select_box($con){
    $output ='';
    $query = "SELECT * FROM pricelist";
    $result = $con->query($query);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
        $output .= '<option value="'.$row["product"].'">'.$row["product"].'</option>';
        }
        return $output;
    }
}
?>

<div class="form-body pal">
    <div class="row">
        <div class="col-md-12 col-md-offset-10">
            <div class="form-group">
                <button type="button" class="btn btn-info add-new-product_record_details"><i class="fa fa-plus"></i> Add Product</button>
            </div>
        </div>
    </div>
</div>
<div class="form-body pal">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover add_row" id="product_record_details">
                        <thead>
                            <tr>
                                <th class="success text-center">Product<span class='require'>*</span></th>
                                <th class="success text-center">Price<span class='require'>*</span></th>
                                <th class="success text-center">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-body pal">
    <div class="col-md-10 col-md-offset-10">
        <div class="form-group">
            <input type="hidden" id="main_product_name"/>
            <input type="hidden" id="main_row_product_count"/>
            <input type="hidden" name="submit_product_creation" class="btn btn-primary">
            <button type="submit" name="product_creation" id="product_creation" class="btn btn-primary"><i class="fa fa-arrow-right"></i> Save</button>
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
    // Append table with add row form on add new button click
        $(".add-new-product_record_details").click(function(){
            //$(this).attr("disabled", "disabled");
            var index = $("#product_record_details tbody tr:last-child").index();
            // Random value has generated to set the unique id value of the table
            var randaom_val = Math.floor(Math.random() * 100000000)
            var row_index = index+randaom_val;
            var row = '<tr>' +
                '<td><select name="product_id[]"  id="product_id'+row_index+'" onchange="fetch_product_price(this.id,'+row_index+')" class="select_format form-control"><option value="">Select</option><?php echo fill_unit_select_box($con); ?></select></td>'+
                '<td><input type="number" name="alead_price[]" id="alead_price'+row_index+'" placeholder="Price"  class="form-control"/></td>' +
        '<td><input type="number" name="aquantity[]" id="aquantity'+row_index+'" placeholder="Price"  class="form-control"/></td>' +
                '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' +
                '</tr>';
            $("#product_record_details").append(row);
            $(".select_format").select2({
                width: 'resolve'
            });
            // $("#main_spare_record_details tbody tr").eq(index + 1).find(".add, .edit").toggle();
            $("#product_record_details tbody tr").eq(index + 1).find("").toggle();
        });
        // Delete row on delete button click
        $(document).on("click", ".delete", function() {
            $(this).parents("tr").remove();
            //$(".add-new").removeAttr("disabled");
        });
    });
</script>

<script>
    function fetch_product_price(product_id,row_count) {
        var test = $('.select_format').val();
        // alert(test);
        $('#main_product_name').val($('#'+spare_id).val());
        $('#main_row_product_count').val(row_count);
    }
</script>

通过输入数量自动乘以价格 例如：产品的获取价格为2000，我们将数量值输入为2，因此输出应显示为4000，该值将输入到价格列中

---

谢谢

好的，这是我的意思的一个例子，当您填充产品时，在数据价格属性中包含价格

$output = "";
while($row = $result->fetch_assoc()) {
$output .= '<option value="'. $row["id"] .'" data-price = "' .$row["price"] . '">'. 
         htmlspecialchars($row["product"]).'</option>';
}
return $output;

产品1 产品2 产品3 产品4

---

您必须使用ajax从数据库检索数据，您面临的问题是什么？@Casper您可以通过更改代码给我举个例子。@accounterم我需要先获取所选产品的价格。我不知道如何继续下去。Thanks@Arun与其获取价格，不如在产品中填入每个产品的价格，比如说数据价格属性，然后客户端上的每个产品都会附带价格，我认为这比为您选择的每个产品发出请求要好。我无法从数据价格中获取价格值；仅当在选项值中指定时才显示。请帮忙。谢谢你告诉我如何在服务器上验证价格。我无法理解您试图说的内容。您选择的产品选项是由$your\u select\u在此处选择的。findoption:已选择，现在您可以通过读取此选项的价格。dataprice不是data priceprice。只要再读一遍这个例子，试着理解它，我试着使它尽可能的小。谢谢给我如何验证服务器的价格。。好的，我会更新一点答案。我希望这个方法添加动态行。。。此Q/A仅涉及获取产品价格的问题，您将不得不提出另一个问题，重点是构建动态行的问题。关于这个新问题，你可能会从社区得到更好的答案。祝你好运