Solved

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

Posted on 2010-08-22
9
352 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

737 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