如何在使用循环从下拉列表中选择一个选项时从数据库中输出一个值？

Question

我是 laravel 的新手。

我有一个来自数据库的数据集，它存储在一个变量 product_data。

name	number_of_products	price
0-50k	2	200
51-100k	3	123
100-150k	6	345
150-200k	8	450

我想将名称写为下拉菜单，在 select 特定名称上，产品数量和价格应显示为文本。我想为每个名称添加另一个数量下拉列表，数量应该是产品数量的最大值。

例如：如果我 select 下拉列表中的名称 51-100k，价格 123 应显示在文本字段中，产品数量 3 应显示在文本字段中，下拉列表中的数量应在范围内从 1 到 3 。此字段还应保存到数据库中的另一个 table，名称为 table，名称为 bid_price，字段名称为 number_of_products，bid_price，original_Price。

我试过的是：

<div class="form-group row">    
     <label>Select Milege gap: </label>
<select class="form-select" name="mileage" id="mileage" onchange="getOption()">
    {% for p in product_data %}
    <option value="{{p.name}}">{{p.name}}</option>
    {% endfor %}
</select>           
</div>
 <div class="form-group row">   
     <label>Avalaible Quantity: </label>
        <input type="text" class="form-control" readonly name="avaialbe_qty"/>
        
</div>
  <div class="form-group row">  
     <label>Quantity: </label>
<select class="form-select" name="quantity" id="quantity" >
    {% for p in product_data %}
    <option value="{{p.number_of_products}}">{{p.number_of_products}}</option>
    {% endfor %}
</select>           
</div>                                  

  <div class="form-group row">
    <label for="inputBid" class="col-sm-2 col-form-label" >Enter Bid Price</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="inputBid" name="bid"  />
    </div>
  </div>
            
 <script>
function getOption()
    {
        var select = document.getElementById('mileage');
        var option = select.options[select.selectedIndex];
        document.getElementById('truck').value = option.value;
    }
</script>

如何根据下拉框的select值显示相应的商品价格和数量？

Answer 1

{% for p in product_data %}
  <option value="{{p.number_of_products}}">{{p.number_of_products}}</option>
    {% endfor %}

这是 Jinja 不是 blade 为了使用 blade

@foreach($product_data as $product)
  <option value="{{$product->number_of_products}}">{{$product->number_of_products}} - ${{$product->price}}</option>
@endforeach

Answer 2

下面给出的代码片段是一个示例，用于说明如何在 php 和 javascript 中实现您的目标。您可以将其更改为 Laravel Blade 和您选择的前端。

假设您将数据作为 PHP 数组，如下所示。

<?php
$data = [
    [
        "name" => "0-50k",
        "number_of_products" => 2,
        "price" => 200,
    ],

    [
        "name" => "51-100k",
        "number_of_products" => 3,
        "price" => 123,
    ],

    [
        "name" => "100-150k",
        "number_of_products" => 6,
        "price" => 345,
    ],

    [
        "name" => "150-200k",
        "number_of_products" => 8,
        "price" => 450,
    ]
];
?>

在HTML

<!-- Including bootstrap for styling --!>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<body>
    <div class="container">
        <div class="row mt-1 p-5">
            <div class="text-success" id="summary"></div>
        </div>
        <div class="row mt-5 p-5">
            <div class="col-3">
                <select name="mileage" id="mileage" onchange="updatePage()" class="form-control">
                    <option value="">Select</option>
                    <?php foreach ($data as $row) : ?>
                        <option value="<?php echo $row['price']; ?>" data-name="<?php echo $row['name']; ?>" data-numberofprods="<?php echo $row['number_of_products']; ?>" data-price="<?php echo $row['price']; ?>">
                            <?php echo $row['name']; ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-3">
                <input type="text" id="truck" value="" class="form-control" />
            </div>
        </div>
    </div>
</body>

<script>
    function updatePage() {
        var summEl = document.getElementById('summary')
        summEl.innerHTML = null;
        var select = document.getElementById('mileage');
        var selectedElem = select.options[select.selectedIndex]
        var val = selectedElem.value
        var outputEl = document.getElementById('truck');

        if (typeof val === 'undefined' || '' === val) {
            outputEl.value = '';
        }
        let name = selectedElem.getAttribute('data-name')
        let numOfProds = selectedElem.getAttribute('data-numberofprods')
        let price = selectedElem.getAttribute('data-price')
        outputEl.value = price;
        summEl.innerHTML = `Maximum ${numOfProds} ${name} products are available.`
    }
</script>

注意事项：

This snippet uses the price and other details as a data-property. This can be manipulated by the anyone. So this is less secure and not recommended to use without server side validation. I have made this suggestion based on the limited information given in the question. The actual requirement is unknown.

如何在使用循环从下拉列表中选择一个选项时从数据库中输出一个值？

How to output a value from database on selecting an option from dropdown using loop?

php

database

loops

laravel

drop-down-menu