How To Get Price Of Related Product When I Select Product From A Selectbox?

How to get the price of the related product, when I select the product from selectbox? I am fetching product names and prices from database (Laravel Mysql project). I want to displ

Solution 1:

I would recommend you to print the price as data-attribute in the option tag like this:

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formrole="form"><divclass="form-group vehicle-type"><labelfor="Vehicle"> Vehicle Name:</label><selectclass="form-control"><optiondata-price="345">Title 1</option><optiondata-price="122">Title 2</option></select></div><divclass="form-group"><labelfor="price"> Price</label><inputtype="text"class="form-control price-input"readonly></div></form>

Then with JS (jQuery) listen to the Change event to extract new value from the selected option. This should work.

Solution 2:

Maybe something like this

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

This will get the text of the option thats selected fiddle about with it and apply it for your code

Solution 3:

use foreach like this:

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

In your controller define the servicevehicles

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

And use this script.

<form><selectid="selectid00"><optionvalue="samsung">Samsung</option><optionvalue="iphone">Iphone</option><optionvalue="generalmobile">GM</option><optionvalue="sony">Sony</option></select></form><buttontype="button"onclick="f01()">f01</button><pid="p00">TEXT</p><script>functionf01() {
    var x = document.getElementById("selectid00").value;
    document.getElementById("p00").innerHTML = x;
}
</script>

Solution 4:

Try this simple code:

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formrole="form"><divclass="form-group "><labelfor="Vehicle"> Vehicle Name:</label><selectid="select_car"class="form-control"><optionvalue="10000">Honda</option><optionvalue="2000">Toyota</option><optionvalue="100000">Ford</option></select></div><divclass="form-group"><labelfor="price"> Price</label><inputtype="text"class="form-control input_price"readonly></div></form>