-1

I have following code in my body section:

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

What I want to do, If a user select Apple or Mango from fruits and change color from second drop down menu, "Right Choice" will be appeared in #result input. On the other hand, if a user selects Orange from fruits and change color option, no change will be seen in #result input. So the jquery code will be like this:

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

But don't know why, this code is not working correctly, selecting all the fruits is changing the text of #result input to "Right Choice". But if I change the code as following it is working:

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

Both the first code and second code have same logical conditions but why the jquery code is not working for first case?

UPDATE: I found if I put one not equal to condition, it is working correctly, but If I use an "or" operator the code is not working:

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

It is not working, but it is working:

$("#color").change(function() {
    if($("#fruits").val()!="Orange"){
        $("#result").val("Right Choice"); 
    }
});
4
  • 1
    if($("#fruits").val()=="Orange"){ you missed a =
    – Imperative
    Apr 12, 2013 at 8:55
  • That was typing mistake here, in original code there is double ==. But code is not working.
    – stockBoi
    Apr 12, 2013 at 8:58
  • It seems to work okay here.
    – Ja͢ck
    Apr 12, 2013 at 9:00
  • Perhaps it would be more obvious if you cleared the #result field first using $('#result').val('');
    – Ja͢ck
    Apr 12, 2013 at 9:01

5 Answers 5

0

Both are different. In your previous code you compare with (!= orange) and in next code you are compare with (= orange).

1
  • In your case it is working correctly when you select mango and apple it works fine because condition is given that not equal to orange so not display anything and in next case condition checks that equals to orange so it display right choice.
    – user112233
    Apr 12, 2013 at 9:07
0

There are a few issues.

  1. You don't change the value of the text box if the condition fails; which means if it already says "Right Choice" then even when you select the invalid option ("Orange") it won't update and will still say "Right Choice".
  2. You don't react to the #fruits element's value changing, which means if you select a colour, then select "Orange" as the fruit, it's still going to say "Right Choice".

You should probably do something like this instead, also binding a change event handler to <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("");   
    }
});

I've also created a jsFiddle demo.

0

This works better for me (not necessarily what you want)

DEMO

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

your code should be on in dom ready function of jquery like this

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

Something like this

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

JS Fiddle Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.