Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2010-08-22
9
Medium Priority
?
355 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

650 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