I have multiple sets of select and inputs 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.

I have multiple sets of select and inputs 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.

• javascript
• jquery
• html
• select
• input

• 1 let newPrice = $("option:selected", this).data("price"); – tymeJV Commented Feb 6, 2018 at 18:20

1 Answer 1

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./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">