All geek questions in one place

JQuery toggle div from select option

I need to switch divs from the dropdown box. I would like it to look like asmselect for jquery, but instead of listing the option tag, I would like it to display a hidden div. Is there anything similar? Or does anyone know how to configure it? Thanks, Jeff.

UPDATED

Basically what I want is the appearance and interaction of the above asmselect link, but instead of generating a list. Sample 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>
+3
source share
3 answers

Have you been 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 selection option changes, you

  • Highlight the selected div with slideDown() and delete its hidden class.
  • Find the siblings of the div having "is" in the class name. (Be easier if the menu wasn’t a brother.)
  • Hide previously displayed siblings with slideUp() , which takes a callback to add the hidden class after slideUp()

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

Get rid of your hidden class and use jQuery to hide them. Then you do not need to worry about adding and removing a class.

HTML without a 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(); });​
+6
source

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

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

Therefore, instead of using the element selector to select a parameter tag, such as the asmselect plugin you are referring to, simply change the element selector to select the div tag on the page.

+2
source

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

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

Source: https://habr.com/ru/post/988988/

More articles:


All Articles