Shaun Mccran

My digital playground

16
D
E
C
2010

Showing and hiding Divs using JQuery and a select field

Ever want to show and hide div elements using form controls? JQuery makes this sort of functionality super easy.

In this blog entry I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.

You can see an example of the finished script here: Demo JQuery show / hide using a select field

This example will use the value selected from the form field to show a correspondingly named div. It's a good example of how using classes to name your elements well can make your life easier later on.

Firstly setup your page, calling in the JQuery library from Google.

view plain print about
1<scrip/t src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
2
3    <scrip/t type="text/javascript">
4        $(document).ready(function(){
5
6        });
7    </script>

Now add the JQuery code that will listen for a change event on our select field. Initially we are hiding all the div elements with a class of 'formElems'. The code here will get the selected value of the select field when it changes, and turn off all other div's, but turn on the div with the selected option's class name.

view plain print about
1$('.formElems').hide();
2
3    // listener for QR type
4    $("#type").change(function ()
5
6    {
7        var selected = $("#type option:selected").val();
8            $('.formElems').hide();
9            $("." +selected).show();
10    });

Next create a select form field and populate it with any options you want. The value from each of the options will be used to control which div is shown, so give them meaningful names. My example looks like this:

view plain print about
1<select name="type" id="type" size="1">
2    <option value="0">Select</option>
3    <option value="site">Website url</option>
4<option value="bkm">Bookmark a Website</option>
5    <option value="call">Make a Phone Call</option>
6    <option value="sms">SMS</option>
7    <option value="mail">E-Mail</option>
8</select>

Next create a series of divs with class names matching each of the values. I've also added a class name to all the divs here of 'formElems' this will be used to turn them all off by default.

view plain print about
1<!--- site --->
2<div class="formElems site">
3    <div class="form-label clear-both">Website Url</div>
4</div>
5
6<!--- Bookmark a Website --->
7<div class="formElems bkm">
8    <div class="form-label clear-both">Bookmark title</div>
9</div>
10
11<!--- Make a Phone Call --->
12<div class="formElems call">
13    <div class="form-label clear-both">Make a call</div>
14</div>

You can see an example of the finished script here: Demo JQuery show / hide using a select field

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
John's Gravatar You have shared an informative thread and I am very grateful to you for sharing such a useful article. I didn’t have an idea regarding this function. Now I think I got the required information. Thank you very much! http://www.myphonehelpdesk.com
# Posted By John | 09/06/15 21:38
akshay's Gravatar motion picture or publication program which is enormously increasing the potential of Facebook as a system for discovery of home entertainment. This has a large effect on business systems which are managing its visibility on Facebook. <a href="http://www.boostfollower.com/buy-pinterest-followe... pinterest followers</a>
# Posted By akshay | 16/08/15 23:46
akshay's Gravatar motion picture or publication program which is enormously increasing the potential of Facebook as a system for discovery of home entertainment. This has a large effect on business systems which are managing its visibility on Facebook. http://www.boostfollower.com/buy-pinterest-followe...
# Posted By akshay | 16/08/15 23:48
Paul's Gravatar I have been searching for an effective way to do this function and I think this is one of the best options. So I am going to follow this method. After trying this method I will definitely share my review regarding this. http://www.datanetpacific.com
# Posted By Paul | 15/09/15 20:51
dragon city hack's Gravatar I very impressed your post.its really very useful for me.you can play dragon city .To get unlimited cheats,coins,gems,gold to get this link http://fbgamescheats.net/dragon-city-cheats-and-ha... at zero penny than click here.
# Posted By dragon city hack | 20/09/15 21:33
cheat dragon city's Gravatar Get it free dragon city.
# Posted By cheat dragon city | 20/09/15 21:34
packers movers's Gravatar Get a wide range of packing and moving companies at helloenquiry.in. We endeavour to furnish the best packers and movers companies in your city at ease of Internet. <a href=http://helloenquiry.in/packers-movers/service/pack... and Movers Delhi</a>
# Posted By packers movers | 24/09/15 23:19
breast enlargement's Gravatar In this blog entry I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.
# Posted By breast enlargement | 03/10/15 07:05
reputation management sydney's Gravatar The code here will get the selected value of the select field when it changes, and turn off all other div's, but turn on the div with the selected option's class name.
# Posted By reputation management sydney | 12/10/15 02:33
cheap custom writing service's Gravatar I have been searching for an effective way to do this function and I think this is one of the best options. So I am going to follow this method. After trying this method I will definitely share my review regarding
# Posted By cheap custom writing service | 27/10/15 00:27
image hosting website's Gravatar usual mastering, nothing added, nothing panned, just my left and your left to the left and the rights to the right.
# Posted By image hosting website | 27/10/15 02:26
http://swokanimalrescue.com's Gravatar priority and settling down and starting a family all of sudden makes sense
# Posted By http://swokanimalrescue.com | 28/10/15 02:01
apartment cleaning services tampa's Gravatar way to do this function and I think this is one of the best options. So I am going to follow this method.
# Posted By apartment cleaning services tampa | 28/10/15 23:37
Music Lessons howick's Gravatar Forte School of Music is providing Music Lessons in Howick Auckland , New Zealand. Forte School is best in Music , Singing , Guitar and Piano Classes. Contact us now 09 534 2223
# Posted By Music Lessons howick | 30/10/15 23:15
kelly's Gravatar This simple j query function is something so useful and happily done when doing the remaining objects. I just built a new website of http://www.essayholic.com/using this plugin. And i am glad to try this tutorial.
# Posted By kelly | 03/11/15 00:22
Music classes sydney's Gravatar Forte schools offer a FREE trial lessons for classes and some offer a Free Trial private lesson.
# Posted By Music classes sydney | 05/11/15 01:59
Build My List 2.0 Download's Gravatar I am very grateful to you for sharing such a useful article. I didn’t have an idea regarding this function. Now I think I got the required information. Thank you very much
# Posted By Build My List 2.0 Download | 07/11/15 00:47
A List Partners High Yield Fund's Gravatar nothing added, nothing panned, just my left and your left to the left and the rights to the right.
# Posted By A List Partners High Yield Fund | 08/11/15 02:54
the salvation diet's Gravatar I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.
# Posted By the salvation diet | 08/11/15 04:45
gurgaon to jaipur cab's Gravatar Forte School of Music is providing Music Lessons in Howick Auckland , New Zealand. Forte School is best in Music
# Posted By gurgaon to jaipur cab | 10/11/15 02:47
Forte School's Gravatar At Forte School of Music, Learning Music is FUN! Learn Piano, Guitar, Singing, Saxophone, Flute, Violin, Drums and More. Book a Free Lesson Online Today!
# Posted By Forte School | 12/11/15 21:50
essay hooks http://www.essayhooks.com/'s Gravatar Music Lessons in Howick Auckland , New Zealand. Forte School is best in Music
# Posted By essay hooks http://www.essayhooks.com/ | 14/11/15 03:53
paper grader online's Gravatar I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.
# Posted By paper grader online | 14/11/15 22:19
The Right Move's Gravatar New Zealand. Forte School is best in Music , Singing , Guitar and Piano Classes
# Posted By The Right Move | 15/11/15 02:41
round rock dental group's Gravatar Guitar, Singing, Saxophone, Flute, Violin, Drums and More. Book a Free Lesson Online Today!
# Posted By round rock dental group | 15/11/15 03:42
http://essaysfor.sale/'s Gravatar Lessons in Howick Auckland , New Zealand. Forte School is best in Music , Singing , Guitar and Piano Classes
# Posted By http://essaysfor.sale/ | 15/11/15 22:28
auto muszak ivizsgaztatas's Gravatar Lessons in Howick Auckland , New Zealand. Forte School is best in Music ,
# Posted By auto muszak ivizsgaztatas | 16/11/15 05:23
See it's review here's Gravatar The whole thing is extremely open and clear details of issues. It’s true information. Your website is very helpful. Thanks for sharing.
# Posted By See it's review here | 18/11/15 03:20
Local Plumbers's Gravatar Query function that shows and hides elements based on a form select field.
# Posted By Local Plumbers | 22/11/15 00:45
Wedding Music's Gravatar It is very much useful and certainly teaches the coverage of all needs.
# Posted By Wedding Music | 24/11/15 23:26
electric piano's Gravatar Query function that shows and hides elements based on a form select field.
# Posted By electric piano | 25/11/15 05:00
Shikha Verma's Gravatar Generally I don’t read article on blogs, but I would like to say that this write-up very compelled me to take
a look at and do so! Your writing style has been amazed me.
Thank you, very great post.
Please visit our wonderful and valuable website-
http://packersmoverschennai.in/
# Posted By Shikha Verma | 26/11/15 23:09
Shikha Verma's Gravatar Generally I don’t read article on blogs, but I would like to say that this write-up very compelled me to take
a look at and do so! Your writing style has been amazed me.
Thank you, very great post.
Please visit our wonderful and valuable website-
http://packersmoverschennai.in/
# Posted By Shikha Verma | 26/11/15 23:10
Dilwale Movie's Gravatar Rohit Shetty team upcoming blockbuster Dilwale features Kajol, Shah Rukh Khan, Varun Dhawan & Kriti Sanon in the lead roles. For the latest tracks of Dilwale Movie check the link.
# Posted By Dilwale Movie | 02/12/15 00:14
free facebook likes's Gravatar Nice Informative Blog having nice sharing..
# Posted By free facebook likes | 14/12/15 23:48
free youtube views's Gravatar including reasonable comments here...
# Posted By free youtube views | 14/12/15 23:50
movers and packers in pune's Gravatar The whole thing is extremely open and clear details of issues. It’s true information.
# Posted By movers and packers in pune | 15/12/15 01:56
jaipur to delhi cab's Gravatar I've also added a class name to all the divs here of 'formElems' this will be used to turn them all off by default.
# Posted By jaipur to delhi cab | 16/12/15 02:12
cccam server's Gravatar I want you to thank for your time of this wonderful read!!! I definitely enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog....
# Posted By cccam server | 18/12/15 23:46
buy real instagram followers and likes's Gravatar I've also added a class name to all the divs here of 'formElems' this will be used to turn them all off by default.
# Posted By buy real instagram followers and likes | 27/12/15 23:11
supreme garcinia cambogia's Gravatar I've also added a class name to all the divs here of 'formElems' this will be used to turn them all off by default.
# Posted By supreme garcinia cambogia | 07/01/16 01:08
Rhea Jain's Gravatar This information you provided in the blog that was really unique I love it!!, Thanks for sharing such a great blog..Keep posting.
http://packers-and-movers-delhi.in/
# Posted By Rhea Jain | 07/01/16 04:17
Victorino Noval Foundation sets the record straigh's Gravatar I’m not that much of a internet reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back in the future. All the best...
buy more likes's Gravatar It's a good example of how using classes to name your elements well can make your life easier later on.
# Posted By buy more likes | 12/01/16 02:57
monthly boxes for men's Gravatar I’ve been thinking about writing a very comparable post over the last couple of weeks. I’ll probably keep it
# Posted By monthly boxes for men | 12/01/16 22:26
packers and movers pimpri chinchwad's Gravatar I’ve been thinking about writing a very comparable post over the last couple of weeks. I’ll probably keep it
# Posted By packers and movers pimpri chinchwad | 13/01/16 22:18
psychotherapy san francisco's Gravatar So luck to come across your excellent blog. It is filled with interest that let me read relaxing.
# Posted By psychotherapy san francisco | 14/01/16 01:51
link's Gravatar I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank youa for the efforts you have made in writing this article.
# Posted By link | 16/01/16 03:18
plancha electrique's Gravatar Good post but I was wondering if you could write a little more on this subject? I’d be very thankful if you could elaborate a little bit further..
# Posted By plancha electrique | 17/01/16 23:36
הדמיות אדריכליות מחירים's Gravatar I'm just seriously able to obtain this blog plus have love looking through handy reports created listed here. A strategies of your article writer appeared to be magnificent, with thanks for any promote.
# Posted By הדמיות אדריכליות מחירים | 18/01/16 23:38
שיפוץ בתים פרטיים's Gravatar I'm just seriously able to obtain this blog plus have love looking through handy reports created listed here. A strategies of your article writer appeared to be magnificent, with thanks for any promote.
# Posted By שיפוץ בתים פרטיים | 19/01/16 01:35
ajmer to jaipur cab's Gravatar It’s true information. Your website is very helpful. Thanks for sharing.
# Posted By ajmer to jaipur cab | 04/02/16 01:25
Back to top