Why is this javascript not working - select box if

Question

I have this code on my site. The idea is to hide a specific class when a specific select box value is selected.

This is my code

$(document).ready(function(){
var txt = 'Marketing';
$("div.ginput_container select#input_3_1 option").each(function(){
    if($(this).val()==txt){
        $('.mar').hide();    
    }

   });
});

The result I'm getting is .mar class being hidden as soon as the page is loaded. I can't see the error, I have also tryied with

var num = 1

but I have the same issue.

Why are you using such a complicated selector? Just use $("#input_3_1 option"). Also, why are you using .each on a single element? — Joseph Silber
– Joseph Silber, Commented Nov 13, 2012 at 17:12
stackoverflow.com/questions/8572545/… I was using this thread as guide. I will try with your suggestion. — Jaypee
– Jaypee, Commented Nov 13, 2012 at 17:13
Is the $(this).val() exactly the same? As far as case? If it's marketing instead of Marketing it will not work. — Dylan Cross
– Dylan Cross, Commented Nov 13, 2012 at 17:14
You're hiding .mar if any of the options has the value Marketing, you're not just checking the selected option. — Barmar
– Barmar, Commented Nov 13, 2012 at 17:16

Joseph Silber · Accepted Answer · 2012-11-13 17:23:04Z

2

$(document).ready(function() {
    var txt = 'Marketing';
    $("#input_3_1").change(function () {
        if ( this.value == txt ) $('.mar').hide();
    });
});

Here's the fiddle: http://jsfiddle.net/9Cyxh/

If you want to show $('.mar') when a different option is selected, use toggle instead:

$('.mar').toggle( this.value != txt );

Here's the fiddle: http://jsfiddle.net/9Cyxh/1/

If you want this to also run on page load (before an option is manually selected), trigger the change event:

$(document).ready(function() {
    var txt = 'Marketing';
    $("#input_3_1").change(function () {
        $('.mar').toggle( this.value != txt );
    }).change();
});

Here's the fiddle: http://jsfiddle.net/9Cyxh/2/

edited Nov 13, 2012 at 17:23

answered Nov 13, 2012 at 17:17

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaypee Over a year ago

Thank you Joseph!! I added else ($('.mar')).show(); if different is selected, is that good or I should use your .toggle() ?

Joseph Silber Over a year ago

@Jaypee - It's all the same. toggle is just a convenience method, to make your code more concise.

Sushanth -- · Accepted Answer · 2012-11-13 17:16:17Z

1

You don't need the loop in the first place

Attach your select to the change() event handler and that should be it..

$(document).ready(function(){

     $("select#input_3_1").on('change', function() {
         var txt = 'Marketing';
         if(this.value === txt){
             $('.mar').hide();    
        };

     }).change()
});

answered Nov 13, 2012 at 17:16

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Bruno · Accepted Answer · 2012-11-13 17:26:18Z

0

If you only want to hide ".mar" class when the value is changed and it equals "Marketing" try

$("#input_3_1").change( function() {
    if( $(this).val().toUpperCase() === "MARKETING" ) {
        $(".mar").hide();
    }
});

Demo here

edited Nov 13, 2012 at 17:26

answered Nov 13, 2012 at 17:15

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Comments

Chris Charles · Accepted Answer · 2012-11-13 17:37:47Z

0

$("#input_3_1").change(function(){
  if ($("#input_3_1").val()=='Marketing'){
    $(".mar").hide();
  }
});

answered Nov 13, 2012 at 17:37

Chris Charles

4,44620 silver badges31 bronze badges

Collectives™ on Stack Overflow

Why is this javascript not working - select box if

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related