jQuery 选择选项，更改 html 内容。我究竟做错了啥？

Posted 2023-05-09

【中文标题】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>

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

【参考方案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');
);