?
Solved

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

Posted on 2010-08-22
9
Medium Priority
?
354 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 1000 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
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 1000 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 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