问题:

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>

回答1:

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

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

jQuery

回答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.

回答3:

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

问题:

回答1:

回答2:

回答3: