从选择框中选择产品时如何获取相关产品的价格？答案

【问题标题】：How to get price of related product when I select product from a selectbox?从选择框中选择产品时如何获取相关产品的价格？
【发布时间】：2018-01-25 07:43:29
【问题描述】：

当我从选择框中选择产品时，如何获取相关产品的价格？

我正在从数据库（Laravel Mysql 项目）中获取产品名称和价格。我想在价格文本框中显示价格。以下是我的看法`

<form role="form">                    
<div class="form-group">
    <label for="Vehicle"> Vehicle Name:</label>
    <select class="form-control">
    @foreach($servicevehicles as $servicevehicle )
        <option>{{$servicevehicle->vehiclename}}</option>


<!--here dispaly vehicle name-->
        @endforeach
    </select>
</div>
<div class="form-group">
    <label for="price"> Price</label>
<!--i want to display related product when i select related vehicle from above selectbox-->
    <input type="text" class="form-control" >
</div>
</form>

【问题讨论】：

您想从哪里获得价格？
到价格文本框

标签： javascript php jquery laravel jquery-selectbox

【解决方案1】：

我建议您将价格打印为选项标签中的数据属性，如下所示：

$('.vehicle-type').on('change', function() {
  $('.price-input')
  .val(
    $(this).find(':selected').data('price')
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form role="form">                    
<div class="form-group vehicle-type">
    <label for="Vehicle"> Vehicle Name:</label>
    <select class="form-control">
        <option data-price="345">Title 1</option>
        <option data-price="122">Title 2</option>
    </select>
</div>
<div class="form-group">
    <label for="price"> Price</label>
    <input type="text" class="form-control price-input" readonly>
</div>
</form>

然后使用 JS (jQuery) 监听 Change 事件以从所选选项中提取新值。这应该可以。

【讨论】：

【解决方案2】：

可能是这样的

$("#your_option").change(function() {
     var get_text = $("#your_option option:selected").text();
    //Do something with the get_text
});

这将获取所选选项的文本，并将其应用于您的代码

【讨论】：

【解决方案3】：

像这样使用 foreach：

@foreach($servicevehicles as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach

在您的控制器中定义服务车辆

$servicevehicles = Model::all()->pluck('name','price');

并使用此脚本。

<form>
<select id="selectid00">
  <option value="samsung">Samsung</option>
  <option value="iphone">Iphone</option>
  <option value="generalmobile">GM</option>
  <option value="sony">Sony</option>
</select>
</form>
<button type="button" onclick="f01()">f01</button>
<p id="p00">TEXT</p>


<script>
function f01() {
    var x = document.getElementById("selectid00").value;
    document.getElementById("p00").innerHTML = x;
}
</script>

【讨论】：

【解决方案4】：

试试这个简单的代码：

$('#select_car').on('change', function() {
  $('.input_price').val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form role="form">                    
<div class="form-group ">
    <label for="Vehicle"> Vehicle Name:</label>
    <select id="select_car" class="form-control">
        <option value="10000">Honda</option>
        <option value="2000">Toyota</option>
        <option value="100000">Ford</option>
    </select>
</div>
<div class="form-group">
    <label for="price"> Price</label>
    <input type="text" class="form-control input_price" readonly>
</div>
</form>

【讨论】：