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> 

Answer 2

我建议在span中添加一个id，然后执行以下操作：

 $('#spanID').text($(this).val());

Answer 3

您可以在选择要修改的范围后使用.html（）函数，例如：

$('span').html('$'+(x*1.5))

Answer 4

您可以使用text（）函数来设置或获取HTML元素的文本（不适用于输入字段！）。您的代码示例可能如下所示：

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

Answer 5

工作示例：http://jsfiddle.net/peeter/fyFxp/

$(document).ready(function() {
    $('#itemQuantitySelect_3').change(function() {

        var itemPrice = 1.50;
        var itemQuantity = $(this).val();
        var quantityPrice = (itemPrice * itemQuantity).toFixed(2);

        $(this).next("span").html("$" + quantityPrice);

    });
});

我已经改变了你的HTML（更易理解的字段名称/ ID），但你应该得到基本的想法。

我还删除了您隐藏的字段，因为我认为没有重复数据。您从选择框中选择的值已经发送到服务器，然后您有一个完全相同的隐藏字段。

您可以使用关键字itemQuantity_3获取数量服务器端（在PHP $ _POST ['itemQuantity_3']中）。

Answer 6

使用html方法。

$('span').html("$1.50");