如何基于选择的选择选项动态更改输入值属性？

Question

I need to update dynamically the input value attribute with data-price value based on option selection using jQuery.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(".select").change(function () { newPrice = $(this).children(':selected').data('price'); console.log(newPrice); $(this).next('input').focus().val(newPrice); }); </script> <select class="select"> <option value="1" data-price="2.99">1</option> <option value="2" data-price="3.99">2</option> <option value="3" data-price="4.99">3</option> <option value="4" data-price="5.99">4</option> </select> <input type="text" value=""> 

Thanks in Advance.

Answer 1

You can use jQuery's .attr() to get/set the attribute .

Please Note: You also have to place the code after the HTML or warp the code with $(document).ready(function(){....})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".select").change(function () { newPrice = $(this).children(':selected').data('price'); $(this).next('input').focus().attr('value', newPrice); console.log('Element:', $(this).next('input')[0]); }); }); </script> <select class="select"> <option value="1" data-price="2.99">1</option> <option value="2" data-price="3.99">2</option> <option value="3" data-price="4.99">3</option> <option value="4" data-price="5.99">4</option> </select> <input type="text" value=""> 

Answer 2

put your script at the bottom so it will apply the property change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="select">
    <option value="1" data-price="2.99">1</option>
    <option value="2" data-price="3.99">2</option>
    <option value="3" data-price="4.99">3</option>
    <option value="4" data-price="5.99">4</option>
</select>
<input type="text" value="">
<script type="text/javascript">
    $(".select").change(function () {
        newPrice = $(this).children(':selected').data('price');
        console.log(newPrice);
       $(this).next('input').focus().val(newPrice);    
    });
</script>

Answer 3

When your code is executed, there is no .select element (the DOM is not ready).

Wrap you code inside

$(function(){...})

or use

$(document).on('change', '.select', function(){.....}) 

to set the listener.

Here is an example:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".select").change(function() { newPrice = $(this).children(':selected').data('price'); console.log(newPrice); $(this).next('input').focus().val(newPrice); }); }); </script> <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> <input type="text" value=""> 

Answer 4

<select id="selectItem">
        <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>
    <input type="text" value="">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <script>

       $(document).ready(function(){
      $("#selectItem").on('change',function(){
      var newPrice=$(this).find('option').data('price');
      console.log(newPrice)
        $("input").val(newPrice)

    })    
      })
    </script>

Since you don't have IDs So you can use like this with you code.