CODEWITHSUNDEEP
jqueryhtml
Matt
Matt

Reputation: 1177

Autofill an input depending on what was chosen from a dropdown

Let's say that I have a dropdown () of products, and below it I have an input where you enter the price. How can I make it so that I can set the prices for every dropdown item and when that dropdown item is selected, it's price will automatically go into the input?

Upvotes: 0

Views: 85

Answers (1)

moped
moped

Reputation: 2247

Simple example, I hope it's what you were asking

$(document).ready(function() {

  $('#price_input').on('change', function() {
    $selection = $(this).find(':selected');
    $('#opt_value').val($selection.val());
    $('#opt_price').val($selection.data('price'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input">
  <option value="price1" data-price="10">Price 1</option>
  <option value="price2" data-price="30">Price 2</option>
  <option value="price3" data-price="22">Price 3</option>
</select>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>

Upvotes: 1

Related Questions