【问题标题】:How to output a value from database on selecting an option from dropdown using loop?如何在使用循环从下拉列表中选择一个选项时从数据库中输出一个值?
【发布时间】:2021-11-21 23:32:52
【问题描述】:

我是 laravel 的新手。

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

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

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

例如:如果我从下拉列表中选择名称 51-100k,则价格 123 应显示在文本字段中,产品数量 3 应显示在文本字段中,下拉列表中的数量应介于 1 到 3 之间。此字段还应保存到数据库中的另一个表,表名为 bid_price,字段为 name、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>
                            
                        

如何根据下拉列表的选择值显示对应的价格和产品数量?

【问题讨论】:

  • 这段代码有什么问题?
  • @GiacomoM 我的输出没有从数据库中获取相应的数据
  • 在此代码中,您将选定选项的值设置为具有 id 卡车的字段。您没有获取任何数据。此外,您想在选择选项时输入价格,但此代码将在字段中显示名称。

标签: php laravel database loops drop-down-menu


【解决方案1】:
{% for p in product_data %}
  <option value="{{p.number_of_products}}">{{p.number_of_products}}</option>
    {% endfor %}

这是 Jinja 不是刀片 为了使用刀片

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

【讨论】:

  • 我需要价格和 number_products 和名称 此代码将仅显示产品数量
  • @Binsha 完成编辑
  • @Binsha 我编辑了我的答案,如果这不适合你,请告诉我
  • 这不是我想要的方式。
  • @Binsha 我编辑了我的答案,如果这不适合你,请告诉我
【解决方案2】:

下面给出的 sn-p 是一个示例,用于说明如何在纯 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>

注意事项:

这个 sn-p 使用价格和其他详细信息作为数据属性。 这可以被任何人操纵。所以这不太安全,不建议在没有服务器端验证的情况下使用。 我根据问题中提供的有限信息提出了这个建议。实际需求未知。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-09-26
    • 1970-01-01
    • 1970-01-01
    • 2017-10-17
    • 2017-12-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多