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.

Answer 1

$(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/