Jquery - 使用下拉选择器更改<span>文本</ span>

Question

这可能很容易,但我是一个JQuery笨蛋并且不断出错!

基本上,我有一个基本的JQuery 1.4+函数来更新输入值 - 但是现在我很难弄清楚当使用下拉选择器选择不同的值时如何使用JQuery同时更新区域中的文本.脚本和HTML看起来像这样:

$(function() {
  $('#mycups3').change(function() {
    var x = $(this).val();

    $('#myhidden3').val(x);
  });
});

<form action="" method="post">
  <input type="hidden" id="myhidden3" name="quantity" value="1" />
  <input type="submit" name="submit" class="button" id="" value="Button" />
  <select id='mycups3'>
    <option value='1'>1 Item</option>
    <option value='2'>2 Items</option>
    <option value='3'>3 Items</option>
  </select>
  <span>$1.50</span>
</form>

我要添加的内容:使用下拉选择器时,我还希望<span>$1.50</span>更新中的值.示例 - 选择值为"1"会使文本字符串span显示为$ 1.50 - 在下拉列表中选择值"2"会使文本字符串显示$ 3.00(或其他)等等!

任何线索都非常感谢!谢谢!

Answer 1

试试这个:

<script type='text/javascript'>     
    $(function() {         
        $('#mycups3').change(function() {             
            var x = $(this).val();             
            $('#myhidden3').val(x);         
            $(this).next("span").text("$" + (x * 1.5).toFixed(2));
        });     
    }); 
</script>