jQuery toggle div from select option

Question

I'm in need to toggle divs from a dropdown select option box. I'd like it similar to asmselect for jquery but instead of listing the option tag I'd like it to display a hidden div. Is there anything like this out there? Or anyone know how to set it up? Thanks, Jeff.

UPDATED

Basically what I want is the look and interaction of the asmselect link above though toggling divs instead of generating a list. Example code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#theSelect").change(function(){          
        $("#theSelect option:selected").click(function(){
            var value = $(this).val();
            var theDiv = $(".is" + value);

            $(theDiv).toggle(function(){
                $(this).removeClass("hidden");
            }),function(){
                $(this).addClass("hidden");
            }
        }); 
    });

});

</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="hidden isPatient">Patient</div>
    <div class="hidden isPhysician">Physician</div>
    <div class="hidden isNurse">Nurse</div>
</body>
</html>

Could you be a little more specific with your requirements? I'm not sure I'm following what you're asking for. — gurun8, May 04 '10 at 17:02

score 6 · Accepted Answer · answered May 14 '10 at 12:12

Were you looking for something like this? http://jsfiddle.net/tYvQ8/

$("#theSelect").change(function() {          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});

When the select option changes, you

Reveal the selected div with slideDown() and remove its hidden class.
Find the divs siblings that have "is" in the class name. (Be easier if the menu wasn't a sibling.)
Hide the previously displayed siblings with slideUp(), which takes a callback to add the hidden class after the slideUp() is complete

Here's another (in my opinion, better) way: http://jsfiddle.net/tYvQ8/1/

Get rid of your hidden class, and use jQuery to hide them. Then you don't have to worry about adding and removing the class.

HTML without hidden class

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="isPatient">Patient</div>
    <div class="isPhysician">Physician</div>
    <div class="isNurse">Nurse</div>
</body>

jQuery

$('[class^=is]').hide();

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();
});

I'm now looking to add to this to make it like the asmselect plugin so that it will display multiple divs and disable them on the selector. Any ideas? — Jeffrey, May 18 '10 at 23:43

score 2 · Answer 2 · answered May 04 '10 at 17:04

2

List options and div tags can be identified and toggled the same way.

$('#div_id').toggle();

So instead of using an element selector to select an option tag like the asmselect plugin you referenced uses, just modify the element selector to select a div tag on the page.

answered May 04 '10 at 17:04

Jeremy

363
1
6

Thanks Jeremy. I can't seem to get it working, can you take a look at my code above. – Jeffrey May 04 '10 at 17:34
Actually, this code looks good and I was able to make it work. What is the error you are seeing? My only suggestion would have been to change the line that you define theDiv on to be a string instead of an element object. For example: var theDiv = ".is" + value; This way, you would be calling $(theDiv) like I would have done it. But as I said, your way worked just fine for me. Post the error and what browser you are using and perhaps I can offer a different suggestion. – Jeremy May 04 '10 at 18:13
try changing the value of theDiv and testing on webkit. My guess is that will fix it. I would try it for you but I don't have access to a webkit browser. – Jeremy May 04 '10 at 20:55

score 0 · Answer 3 · answered Jun 17 '17 at 10:45

Use .change() as previously mentioned, but with jquery's .show() and/or .hide() methods:

    if($(this).val() == 'selected_option') {
        $('.selector1').show(); //displays element with display:none;        
    } else {
        $('.selector1').hide(); //hides element again
    }

jQuery toggle div from select option

3 Answers3

Linked