CODEWITHSUNDEEP
javascriptjqueryhtml
James
James

Reputation: 65

If this options is selected show div using jquery

I'm trying to get a div to show if a certain option is selected as well as a previous option in another select tag is selected.

This jfiddle http://jsfiddle.net/LehL1pru/ works but what I want to do is to make sure that the previous select option equals a certain value.

$(function() {
    $("#smallplantable").click(function() {
    if (this.value == ""){
        $('.plantableone').hide();
    }
        if (this.value == "plantablenone") {
        $('.plantableone').hide();
        }
        if (this.value == "plantableone") {
        $('.plantableone').show();
        }
    });
});

What I have tried is adding && to the if statement in jquery but it doesn't seem to be working as you can see here http://jsfiddle.net/5bLc1f9b/1/

$(function() {
    $("#smallplantable").click(function() {
    if (this.value == ""){
        $('.plantableone').hide();
    }
        if (this.value == "plantablenone") {
        $('.plantableone').hide();
        }
        if (this.value == "plantableone" && "#numberofstaff".value == "smalljobsite") {
        $('.plantableone').show();
        }
    });
});

Anyone have an idea why this isn't working or have an alternative option?

Thanks.

Upvotes: 1

Views: 55

Answers (3)

Mark C.
Mark C.

Reputation: 6460

Try this:

$(function() {
    $("#smallplantable").click(function() {
        var firstSelect = $('#numberofstaff').val();
    if (this.value == ""){
        $('.plantableone').hide();
    }
        if (this.value == "plantablenone") {
        $('.plantableone').hide();
        }
        if (this.value == "plantableone" && firstSelect == "smalljobsite") {
        $('.plantableone').show();
        }
    });
});

Your selector is wrong for "#numberofstaff", which is why it wouldn't work.

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

I have updated your fiddle. Though the code needs to be more tidy. But for reference, you can rely on it

Also, you are using jQuery, however, you did not included jQuery in your fiddle. And if you are using jQuery then in your code, use jQuery functions only - not must though but quite handy

http://jsfiddle.net/5bLc1f9b/3/

$(function() {
    $("#smallplantable").change(function() {
    if ($(this).val() == ""){
        $('.plantableone').hide();
    }
        if ($(this).val() == "plantablenone") {
        $('.plantableone').hide();
        }
        if ($(this).val() == "plantableone" && $("#numberofstaff").val() == "smalljobsite") {

        $('.plantableone').show();
        }
    });
});

Upvotes: 1

taxicala
taxicala

Reputation: 21789

You are not getting the jquery object for the first select, change as follows:

$(function() {
    $("#smallplantable").click(function() {
    if (this.value == ""){
        $('.plantableone').hide();
    }
        if (this.value == "plantablenone") {
        $('.plantableone').hide();
        }
        if (this.value == "plantableone" && $("#numberofstaff").val() == "smalljobsite") {
        $('.plantableone').show();
        }
    });
});

Note that i've changed "#numberofstaff".value for $("#numberofstaff").val()

Upvotes: 0

Related Questions