jQuery 选择选项，更改 html 内容。我究竟做错了什么？答案

【问题标题】：jQuery select option, change html content. What am i doing wrong?jQuery 选择选项，更改 html 内容。我究竟做错了什么？
【发布时间】：2012-04-07 02:55:38
【问题描述】：

我以为就这么简单……

$('#yourSelect').change(function () {
    if ($(this).val() == '12500', '8500', '7000') {
        $("#textBox").html("+ £10 delivery");
    } else {
        $("#textBox").html("+ £6 delivery");
    }
});

前面

<select name="Amount" id="yourSelect">
    <option value="5000">5000</option>
    <option value="6000">6000</option>
    <option value="7000">7000</option>
    <option value="8500">8500</option>
    <option value="12500">12500</option>
</select>

<div id="textBox">+ £6 delivery</div>

我是不是疯了？这里有什么问题？

【问题讨论】：

标签： jquery select jquery-selectors

【解决方案1】：

您需要使用|| 运算符，而不是if ($(this).val() == '12500', '8500', '7000') {：

$('#yourSelect').change(function() {
    var value = $(this).val();
    if (value == '12500' || value == '8500' || value == '7000') {
        $("#textBox").html("+ £10 delivery");
    }
    else {
        $("#textBox").html("+ £6 delivery");
    }
});

正如 @hafichuk 所评论的，您可以将值解析为数字并使用更简单的条件：

if (parseInt($(this).val(), 10) >= 7000)
    $("#textBox").html("+ £10 delivery");
else
    $("#textBox").html("+ £6 delivery");

你可以让它变得更简单：

var output = parseInt($(this).val(), 10) >= 7000 ? '+ £10 delivery' 
                                                 : '+ £6 delivery';
$("#textBox").html(output);

【讨论】：

可能更合适的一件事是将您的“金额”视为数字而不是字符串。我会考虑使用大于比较：if (value >= 7000) {
@hafichuk。谢谢，将其添加到我的答案中。添加了学分。我希望我们可以拆分代表... :-)

【解决方案2】：

改变 if 条件

var val = $(this).val();
if (val == '12500' || val ==  '8500' || val ==  '7000')

不然

var arr = ['12500','8500','7000'];
$('#yourSelect').change(function () {
    if (arr.indexOf($(this).val()) !== -1) {
        $("#textBox").html("+ £10 delivery");
    } else {
        $("#textBox").html("+ £6 delivery");
    }
});

【讨论】：

最好缓存 jQuery 对象然后构造它 3 次。

【解决方案3】：

if 中的代码不是有效的布尔表达式。改成这样：

if ($(this).val() == '12500' ||  $(this).val() == '8500' || $(this).val() ==  '7000') {

【讨论】：

【解决方案4】：

或者，如果超过一定金额时运费总是更高，您可以使用$(this).val() >= 7000。然后，当金额选择发生变化时，您不必更改代码，除非您还更改了较高的交付成本阈值。

【讨论】：

【解决方案5】：

试试这个

$(document).ready(function() {
    $('#yourSelect').change(function() {
        if ($(this).val() == '12500' || $(this).val() == '8500' || $(this).val() == '7000') {
            $("#textBox").html("+ £10 delivery");
        }
        else {
            $("#textBox").html("+ £6 delivery");
        }
    });
})

jsFiddle Link

【讨论】：

【解决方案6】：

$('#yourSelect').change(function() {
    var deliveryPrice = parseInt(this.value, 10) >= 7000 ? 10 : 6;
    $('#textBox').text('+ £' + deliveryPrice + ' delivery');
});

【讨论】：