CODEWITHSUNDEEP
jquery
Web Guy
Web Guy

Reputation: 94

jquery - hide css if select dropdown is chosen

I have a dynamic form that creates drop downs and increments the names correctly. What i need to do is hide a text box if the user selects a certain dropdown value. This i can do, but what i need help on is hiding the right thing as the names are incremental. 

$("select[id^=Profession]").change(function() {
 if(jQuery(this).find("option:selected").val() == "2") {
    jQuery("#ADA_1").hide();
} else {
    jQuery("#ADA_1").show();
};  });

Working Sample: jsfiddle

Upvotes: 2

Views: 237

Answers (4)

user1646111
user1646111

Reputation: 

$("select[id^=Profession]").change(function () {
    var id = $(this).attr('id').replace('Profession', '');
    if (jQuery(this).find("option:selected").val() == "2") {
        jQuery("#ADA_"+id).hide();
    } else {
        jQuery("#ADA_"+id).show();
    }
});

DEMO

Upvotes: 1

DarkAjax
DarkAjax

Reputation: 16223

You can also do it like this:

$("select[id^=Profession]").change(function () {
    if (jQuery(this).find("option:selected").val() == "2") {
        jQuery(this).parent().next("[id^=ADA_]").hide();
    } else {
        jQuery(this).parent().next("[id^=ADA_]").show();
    }
});

jsfiddle demo

Upvotes: 1

Nelson Benítez León
Nelson Benítez León

Reputation: 50573

Try this:

$("select[id^=Profession]").change(function() {
 var id = $(this).attr('id').split('Profession')[1];
 if(jQuery(this).find("option:selected").val() == "2") {
    jQuery("#ADA_"+id).hide();
 } else {
    jQuery("#ADA_"+id).show();
 }
});

See working fiddle

Upvotes: 4

j08691
j08691

Reputation: 207901

Try this:

$("select[id^=Profession]").change(function () {
    index = $(this).attr('id').substr(-1);
    if (jQuery(this).find("option:selected").val() == "2") {
        jQuery("#ADA_"+index).hide();
    } else {
        jQuery("#ADA_"+index).show();
    }
});

jsFiddle example

Upvotes: 2

Related Questions