Javascript Jquery - 使用下拉选择器更改 <span>text</span>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5621019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - change <span>text</span> with dropdown selector
提问by Jamison
This might be easy, but I'm a JQuery dunce and keep getting errors!
这可能很容易，但我是一个 JQuery 笨蛋并且不断收到错误！
Basically, I have a basic JQuery 1.4+ function that updates an input value - but now I'm having a hard time figuring out how to also use JQuery to simultaneously update a text in the area when different values are chosen with a dropdown selector. The Script and HTML looks like this:
基本上，我有一个基本的 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>.50</span>
</form>What I want to add:
When using the dropdown selector, I also want the value in the <span>$1.50</span>to update. Example - selecting a value of '1' makes the text string in spanshow $1.50 - selecting a value of '2' in the dropdown makes the text string show $3.00 (or whatever) etc!
我要添加的内容：使用下拉选择器时，我还希望<span>$1.50</span>更新中的值。示例 - 选择值 '1' 使文本字符串span显示 $1.50 - 在下拉列表中选择值 '2' 使文本字符串显示 $3.00（或其他）等！
Any clues are greatly appreciated! Thanks!
任何线索都非常感谢！谢谢！
回答by Chandu
Try this:
尝试这个：
<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>
回答by exactlee
You could use the .html() function after you selected the span you want to modify e.g.:
选择要修改的跨度后，您可以使用 .html() 函数，例如：
$('span').html('$'+(x*1.5))
回答by Munzilla
I would suggest adding an id to the span then doing something like this:
我建议在跨度中添加一个 id 然后做这样的事情：
$('#spanID').text($(this).val());
回答by Peeter
Working example: http://jsfiddle.net/peeter/fyFxp/
工作示例：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);
});
});
I've changed your HTML a bit (more understandable field names/IDs), but you should get the basic idea.
我已经稍微更改了您的 HTML（更易于理解的字段名称/ID），但您应该了解基本概念。
I also removed your hidden field as I see no point in duplicating data. Your selected value from the select box will already be sent to the server and then you have an hidden field that does exactly the same.
我还删除了您的隐藏字段，因为我认为复制数据没有意义。您从选择框中选择的值将已经发送到服务器，然后您就有了一个完全相同的隐藏字段。
You can get the quantity server-side with the keyword itemQuantity_3 (in PHP $_POST['itemQuantity_3']).
您可以使用关键字 itemQuantity_3（在 PHP $_POST['itemQuantity_3'] 中）获取服务器端的数量。
回答by markmywords
You can use the text() function to set or get the text of an HTML Element (does not work on input fields!). Your code example might look like this:
您可以使用 text() 函数来设置或获取 HTML 元素的文本（不适用于输入字段！）。您的代码示例可能如下所示：
<script type='text/javascript'>
$(function() {
$('#mycups3').change(function() {
var x = $(this).val();
$('#myhidden3').val(x);
$('form span').text('$'+(x*1.5));
});
});
</script>
回答by Headshota
use html method.
使用 html 方法。
$('span').html(".50");
