-1

我的正文部分有以下代码：

<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="" />

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

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

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

$("#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"); 
    }
});
4

5 回答 5

0

有几个问题。

  1. 如果条件失败，您不会更改文本框的值；这意味着如果它已经显示“正确选择”，那么即使您选择了无效选项（“橙色”），它也不会更新并且仍然会显示“正确选择”。
  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 演示。

于 2013-04-12T09:03:49.207 回答
0

像这样的东西

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

JS 小提琴演示

于 2013-04-12T09:04:01.237 回答
0

两者是不同的。在您之前的代码中，您与 (!= orange) 进行比较，而在下一个代码中，您将与 (= orange) 进行比较。

于 2013-04-12T08:57:24.777 回答
0

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

演示

$("#color, #fruits").change(function() {
    var val = $("#fruits").val();
    window.console && console.log("fruit:",val);
    $("#result").val(val=="Orange"?"":"Right Choice");
});
于 2013-04-12T09:06:32.867 回答
0

您的代码应该像这样在 jquery 的 dom 就绪功能中打开

$(document).ready(function() {
    $("#color").change(function() {
    if($("#fruits").val()!="Orange"){ $("#result").val("Right Choice"); }
    });
});
于 2013-04-12T09:07:52.547 回答