Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 464
Jeffrey Avatar asked Feb 27 '23 02:02

Jeffrey


2 Answers

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();
});​
like image 120
user113716 Avatar answered Mar 11 '23 15:03

user113716


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.

like image 20
Jeremy Avatar answered Mar 11 '23 15:03

Jeremy