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（或其他金额）等！ 任何提示将不胜感激！谢谢！

- Jamison

---

我看到一些建议，人们获取下拉框的值并将其乘以1.5。记得在使用表达式之前使用parseInt()对x进行转换。如果x无法解析（返回Nan），则使用- parseInt(x) || 0 -，其中0是您的备选项。 - John Strickler

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> 

- Chandu

---

是的！这是一个不错的方法。只有一个问题 - 如果结果是$4.5，如何确保添加另一个“0”使其变成$4.50？我猜这是一个格式问题，所以我正在尝试使用.toFixed（）进行实验； - Jamison

Answer 2

您可以在选择要修改的span后使用.html()函数，例如：

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

- exactlee

Answer 3

我建议给这个添加一个id，然后像这样做：

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

- Munzilla

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>

- markmywords

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']中）在服务器端获取数量。

- Peeter

Answer 6

使用 HTML 方法。

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

- Headshota