Solved

use jquery to call a function when a select option is selected

Posted on 2010-08-22
9
353 Views
Last Modified: 2013-11-19
Hello,

What is the best way to associate a jquery function with an html select input control (drop down box).  I want to call a jquery function each time I select an option in the select control and then based on the option value, perform some logic.  Thanks for the suggestions.
0
Comment
Question by:cgray1223
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 

Author Comment

by:cgray1223
ID: 33498361
....one additional item I need to accomplish, I need to reload the page at the end of the function that gets attached to the selection option selection.
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33498368
Do your select like this

<select name="blah" style="width:150px;" onchange="yourcheckingfunction()" id="blah">
0
 
LVL 9

Accepted Solution

by:
Snarfles earned 250 total points
ID: 33498375
actually make it onchange="yourcheckingfunction(this.value)" so that the value of the selected option will be passed to the function.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 9

Expert Comment

by:Snarfles
ID: 33498379
window.location.reload() might be the code you want to reload the page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33499970
To know when a new select option is selected you may use "change" : http://api.jquery.com/change/


$("#mySelect").change(function() {
      // check which option is selected
});
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33499982
to get value of the selected option for the select having the id "mySelect" you may use :

$("option:selected", "#mySelect").val()
$("#mySelect").change(function() {
    if( $("option:selected", "#mySelect").val() == "10" ) {
          // do something when value of the option selected is 10
    }
});

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 33499986
test page :


<!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 language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#mySelect").change(function() {
			switch( $("option:selected", "#mySelect").val() ) {
				case "": alert("Select something!");break;
				case "1": alert("1");break;
				case "2": alert("2");break;
				case "3": alert("3");break;
				case "4": alert("4");break;
				default : alert(">5");break;
			}
		});
	});
</script>
</head>
<body>
<select id="mySelect">
	<option value="">Select something...</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4" selected="selected">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
</select>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33499998
@Snarfles is right, to reload the page use : location.reload()

<!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 language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#mySelect").change(function() {
			switch( $("option:selected", "#mySelect").val() ) {
				case "": alert("Select something!");break;
				case "1": alert("1");break;
				case "2": alert("2");break;
				case "3": alert("3");break;
				case "4": alert("4");break;
				default : alert(">5");break;
			}
			location.reload();
		});
	});
</script>
</head>
<body>
<select id="mySelect">
	<option value="">Select something...</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4" selected="selected">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
</select>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33528027
Thanks for the points!
0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question