javascript — Как узнать цену соответствующего товара, когда я выбираю товар в окне выбора?
Как узнать цену соответствующего товара, когда я выбираю товар из окна выбора?
Я выбираю названия продуктов и цены из базы данных (проект 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>
Решение
Я бы порекомендовал вам напечатать цену в качестве атрибута данных в теге option следующим образом:
$('.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>Другие решения
Может как то так
$("#your_option").change(function() {
var get_text = $("#your_option option:selected").text();
//Do something with the get_text
});
Это позволит получить текст опции, выбранной для этого, и применить ее к вашему коду.
используйте 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>Попробуйте этот простой код:
$('#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>