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");