jQuery toggle div from select option

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>

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();
});

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.

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
    }

来源：https://stackoverflow.com/questions/2767284/jquery-toggle-div-from-select-option