CODEWITHSUNDEEP
javascriptjquery
Jimmy
Jimmy

Reputation: 12517

Hide a div based on a select input box

I was helped with some code here. I tweaked it to try and hide a whole div instead of an element. It was only a small tweak but I seem to have done something to stop it working.

HTML

<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
<div id="added_fields">
    <select name="menu-168" class="wpcf7-validates-as-required">
        <option value="Residential">Residential</option>
        <option value="Commercial">Commercial</option>
    </select>
</div>

JS

if ($("select[name='menu-168']").val() == "Commercial") {
    $("#added_fields").addClass("hidden");
}​

Would someone be kind enough to tell me where I have gone wrong?

Upvotes: 1

Views: 455

Answers (10)

pete
pete

Reputation: 25091

Your code is only executing once, on $(document).ready();. Wrap it in a .change() event handler.

$("select[name='menu-168']").change(function(e) {
    if ($(this).val() == "Commercial") {
        $("#added_fields").addClass("hidden");
    }
});​

Updated fiddle: http://jsfiddle.net/K9zGP/36/

UPDATE:

To make the text-input reappear in jsfiddle.net/K9zGP/46, use .toggleClass() instead:

$("select[name='menu-168']").change(function(e) {
    var isCommercial = $(this).val() == "Commercial";
    $("#added_fields").toggleClass("hidden", isCommercial);
});​

YAF: http://jsfiddle.net/K9zGP/71/

Upvotes: 0

Luca Davanzo
Luca Davanzo

Reputation: 21528

You have to "attach" to a event "hide".

So you can do this with click() (or change()) event like in this fiddle.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

You need to do the check of the select value when it changes.

I want to hide the input box not the select box im afraid

In that case you need to change the #added_fields selector. Try this:

$("select[name='menu-168']").change(function() {
    if ($(this).val() == "Commercial") {
        $('#added_fields').addClass("hidden");
    }
    else {
        $('#added_fields').removeClass("hidden")
    }
});

Example fiddle

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

Try this:

$("select").change(function(){
if($("select option:selected").val() == "Commercial") 
$("input[name=text-708]").hide();
else
$("input[name=text-708]").show();   
});

​ ​ DEMO

Upvotes: 0

Bilal lilla
Bilal lilla

Reputation: 658

hay yomiss to call the change event of the select box. check this fiddle. http://jsfiddle.net/K9zGP/44/

 $("select[name='menu-168']").change(function(){
alert($(this).val());
if ($(this).val() == "Commercial") {
$("#added_fields").addClass("hidden");
}

});

Upvotes: 0

Adil
Adil

Reputation: 148180

You did not write the code on change event of select and your selected value at load is not commercial so your statement under if does not execute.

Live Demo

$("select[name='menu-168']").change(function() {

    if ($("select[name='menu-168']").val() == "Commercial") {
        $("input[name=text-708]").addClass("hidden");
    }
    else
        $("input[name=text-708]").removeClass("hidden");
});​

Upvotes: 1

CR41G14
CR41G14

Reputation: 5594

Make sure you have the option:selected property in the change event of the select list

$("select[name='menu-168']").bind("change",function(e){

    if ($("select[name='menu-168'] option:selected").val() == "Commercial") {
        $("#added_fields").hide();
    }

});

Upvotes: 0

ddev
ddev

Reputation: 389

try

$("#added_fields").hide();

you can find more information here: http://api.jquery.com/hide/

Updated: If you want to refer to the change event of your select you have to either fire your function in the onselectedindexchanged attribute of your select or add a change event on it via jQuery:

$("select[name='menu-168']").change(function() {
  if ($(this).val() == "Commercial") {
    $("#added_fields").hide();
  }
});

more info about change: http://api.jquery.com/change/

Upvotes: 0

Khaled Al Hage Ismaiil
Khaled Al Hage Ismaiil

Reputation: 11

Try this :

$("select[name='menu-168']").change(function() {

if ( $(this).val() == "Commercial") {
    $("#added_fields").hide();
}
});​

Upvotes: 0

UnitStack
UnitStack

Reputation: 1185

Try changing the following line

 $("#added_fields").addClass("hidden");

to 

 $("#added_fields").hide();

Upvotes: 0

Related Questions