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="">

Answer 2

将脚本放在底部，这样它将应用属性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

执行代码时，没有.select元素（DOM未准备好）。

将代码包装在内部

$(function(){...})

或使用

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

设置监听器。

这里是一个例子：

<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>

由于您没有ID，因此可以在代码中使用这样的代码。

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

4 个答案: