This code is working fine if ($(this).val() == "Spine") but if ($(this).val() == "Spine"||"Brian") then the selection menu closes then opens again when the selection for "optionbodyRegion" == "" What am I doing wrong?

$("#optionbodyRegion").change(function(){

                if ($(this).val() == "Spine"||"Brain") {

                    document.getElementById('optioncontrast').options[0]=new Option("Select", "", false, false)
                    document.getElementById('optioncontrast').options[1]=new Option("With", "With", false, false)
                    document.getElementById('optioncontrast').options[2]=new Option("Without", "Without", false, false)
                    document.getElementById('optioncontrast').options[3]=new Option("With and Without", "With and Without", false, false)


                    $("#contrast").slideDown("fast"); //Slide Down Effect

                } else {
                    if ($(this).val() == "" ) {
                    $("#contrast").slideUp("fast");   //Slide Up Effect

                    }
                }
            });

This code is working fine if ($(this).val() == "Spine") but if ($(this).val() == "Spine"||"Brian") then the selection menu closes then opens again when the selection for "optionbodyRegion" == "" What am I doing wrong?

$("#optionbodyRegion").change(function(){

                if ($(this).val() == "Spine"||"Brain") {

                    document.getElementById('optioncontrast').options[0]=new Option("Select", "", false, false)
                    document.getElementById('optioncontrast').options[1]=new Option("With", "With", false, false)
                    document.getElementById('optioncontrast').options[2]=new Option("Without", "Without", false, false)
                    document.getElementById('optioncontrast').options[3]=new Option("With and Without", "With and Without", false, false)


                    $("#contrast").slideDown("fast"); //Slide Down Effect

                } else {
                    if ($(this).val() == "" ) {
                    $("#contrast").slideUp("fast");   //Slide Up Effect

                    }
                }
            });

• javascript
• jquery
• html

• 4 Although it feels natural to say, in English, if x equals a or b in most programming languages you need to be explicit and say if x equals a or x equals b – Matt Burland Commented Nov 16, 2012 at 18:10
• 3 Feel free to accept any of these answers as it will increase your reputation as well as the user who took the time to answer your question. – blackbourna Commented Nov 18, 2012 at 6:04

6 Answers 6

You have wrong syntax in using the logical or || operator

Change

 if ($(this).val() == "Spine"||"Brain") {

To

if ($(this).val() == "Spine"|| $(this).val() == "Brain") {

You can use value with javascript object instead of val() of jquery object, as Fabrício Matté suggested. It would give you performance benefit.

if (this.value == "Spine" || this.value == "Brain")

You must state a complete condition /test on each side of the 'OR'.

if($(this).val() == "Spine" || $(this).val() == "Brain")

try this code:

  if (($(this).val() == "Spine")||($(this).val() =="Brain")))

What you're looking for is:

if ($(this).val() == "Spine"|| $(this).val() == "Brain")

As is, you code has an error regarding Operator Precedence. I'd recommend looking at https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Operator_Precedence

Your version will always return true, as any non-zero length string will resolve to true when used in a boolean context. There are many articles on Javascript's quirky behaviour when it comes to boolean evaluations. A basic outline of some of some of the most common ones can be found at http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/

I would use a different approach. Especially if the list grows. If you get a list that has several parts, the conditional gets ugly.

var parts = ["Spine", "Brain"];
var value = $(this).val();

if($.inArray(value, parts) > -1){
    //do something    
}

or use switch case

$("#optionbodyRegion").change(function(){
    switch ($(this).val())
{
   case "Spine": case "Brain": 
    document.getElementById('optioncontrast').options[0]=new Option("Select", "", false, false)
                    document.getElementById('optioncontrast').options[1]=new Option("With", "With", false, false)
                    document.getElementById('optioncontrast').options[2]=new Option("Without", "Without", false, false)
                    document.getElementById('optioncontrast').options[3]=new Option("With and Without", "With and Without", false, false)


                    $("#contrast").slideDown("fast"); //Slide Down Effect
   break;
 case "":
$("#contrast").slideUp("fast");   //Slide Up Effect
break;

  default: 
  break;
}