|
Showing and hiding Divs using JQuery and a select field |
||||||||
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.
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.
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:
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.
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
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/
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/
http://packers-and-movers-delhi.in/