jQuery select onChange update input field value
Within the event change
use the following to get the current selected option:
var newPrice = $(this).children(':selected').data('price');
The following code snippet just prints the selected value and set the newPrice
to the next input
field using $(this).next('input').focus().val(newPrice);
.
Now you can do any logic with that value.
$(".select").change(function () {
newPrice = $(this).children(':selected').data('price');
console.log(newPrice);
/*
$(".one option:selected").each(function () {
Price = newPrice*$(".unit").val();
});*/
$(this).next('input').focus().val(newPrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select">
<option value="1" data-price="1.99">1</option>
<option value="2" data-price="2.99">2</option>
<option value="3" data-price="3.99">3</option>
<option value="4" data-price="4.99">4</option>
</select>
<input type="text" value="1.99">
Related videos on Youtube
Comments
-
Neluttu almost 2 years
I have multiple sets of
select
andinput
s in one form and I need to update each input based on the selected value. Update the price in the input field based on the select dropdown.The drop-down carries a value and a data attribute. The value is the quantity, and the data-attr is the price.
So when you select
<1>
from the drop-down, the input will change to<1> *
its data-attribute.I don't want to use ID's or classes or names to get current onChange.
// jQuery onChange this particular {select_drop_down}
<select class="select"> <option value="1" data-price="2.99">1</option> <option value="2" data-price="2.99">2</option> <option value="3" data-price="2.99">3</option> <option value="4" data-price="2.99">4</option> </select>
// update this input's value to the selected:index * data-price. // new value: if option value=2 is selected, change input[type=text] to the new value.
<input type="text" value="2.99">
// same goes for the next {select_drop_down}
<select class="select"> <option value="1" data-price="1.99">1</option> <option value="2" data-price="1.99">2</option> <option value="3" data-price="1.99">3</option> <option value="4" data-price="1.99">4</option> </select>
<input type="text" value="1.99">
So this is what I have so far:
$(".select").change(function () { newPrice = 2.99; // I NEED HERE THE CURRENT data-price value; $(".one option:selected").each(function () { Price = newPrice*$(".unit").val(); }); $(this).nextAll('input').first().focus().val(Price.toFixed(2)) });
this works but only for the first drop-down, not the second.
-
tymeJV about 6 years
let newPrice = $("option:selected", this).data("price");
-