Question

我的身体部分有以下代码：

<form action="" method="post">
    <select id="fruits" name="fruits">
        <option>Apple</option>
        <option>Mango</option>
        <option>Orange</option>
    </select>
    <select id="color" name="color">
        <option>Red</option>
        <option>Green</option>
        <option>Yellow</option>
    </select>
    <input type="text" id="result" value="" />

我想做什么，如果用户从水果中选择Apple或Mango并从第二个下拉菜单中更改颜色，“Right Choice”将出现在#result输入中。另一方面，如果用户从水果中选择橙色并更改颜色选项，则#result输入中不会显示任何变化。所以jquery代码将是这样的：

$("#color").change(function() {
    if($("#fruits").val()!="Orange"){ $("#result").val("Right Choice"); }
});

但不知道为什么，这段代码不能正常工作，选择所有成果正在将#result输入的文本改为“Right Choice”。但是如果我按照以下方式更改代码就可以了：

$("#color").change(function() {
    if($("#fruits").val()=="Orange"){
        /*--do nothing--*/
    }else{
        $("#result").val("Right Choice");
    }
});

第一个代码和第二个代码都具有相同的逻辑条件，但为什么jquery代码不适用于第一种情况？

更新：我发现如果我把一个不等于条件，它工作正常，但是如果我使用“或”运算符代码不能正常工作：

$("#color").change(function() {
    if($("#fruits").val()!="Orange" || $("#fruits").val()!="Mango"){
        $("#result").val("Right Choice"); 
    }
});

它不起作用，但它正在运作：

$("#color").change(function() {
    if($("#fruits").val()!="Orange"){
        $("#result").val("Right Choice"); 
    }
});

Answer 1

两者都不同。在您之前的代码中，您将与（！= orange）进行比较，并在下一个代码中与（=橙色）进行比较。

Answer 2

有一些问题。

如果条件失败，则不更改文本框的值;这意味着如果它已经说“正确选择”，那么即使你选择了无效选项（“橙色”）它也不会更新，仍然会说“正确选择”。
您没有对#fruits元素的值更改作出反应，这意味着如果您选择一种颜色，然后选择“橙色”作为水果，它仍然会说“正确”选择。”

您应该做一些类似的事情，同时将change事件处理程序绑定到<select id="fruits">：

$("#color").change(function () {
    if ($("#fruits").val() != "Orange") {
        $("#result").val("Right Choice");
    }
    else {
        $("#result").val("");   
    }
});

$("#fruits").change(function() {
    if(this.value != "Orange") {
        $("#result").val("Right Choice");
    }
    else {
        $("#result").val("");   
    }
});

我还创建了jsFiddle demo。

Answer 3

像这样的东西

$("#color").change(function() {
    if($("#fruits").val()!="Orange"){ 
        $("#result").val("Right Choice"); 
    } else {
        $("#result").val("");
    }
});

JS Fiddle Demo

Answer 4

这对我来说效果更好（不一定是你想要的）

DEMO

$("#color, #fruits").change(function() {
    var val = $("#fruits").val();
    window.console && console.log("fruit:",val);
    $("#result").val(val=="Orange"?"":"Right Choice");
});

Answer 5

你的代码应该在jquery的dom ready函数中开启，就像这样

$(document).ready(function() {
    $("#color").change(function() {
    if($("#fruits").val()!="Orange"){ $("#result").val("Right Choice"); }
    });
});

如何在jquery中正确编写'NOT EQUAL TO'运算符

5 个答案: