javascript - 如何根据所选的选择选项动态更改输入值属性？

Question

我需要使用 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="">

提前致谢。

Answer 1

您可以使用 jQuery 的 .attr()获取/设置属性。

请注意:您还必须将代码放在 HTML 之后或使用 $(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="">