Solved

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

Posted on 2010-08-22
9
350 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
  • 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to make a moving character 3 68
PHP Form Calculate Total Price 10 82
Jquery-Javascript setAttribute function help 7 18
Alert after MVC form submitted 1 22
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

821 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