cgray1223
asked on
use jquery to call a function when a select option is selected
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.
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.
Do your select like this
<select name="blah" style="width:150px;" onchange="yourcheckingfunc
<select name="blah" style="width:150px;" onchange="yourcheckingfunc
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
window.location.reload() might be the code you want to reload the page.
To know when a new select option is selected you may use "change" : http://api.jquery.com/change/
$("#mySelect").change(func
// check which option is selected
});
$("#mySelect").change(func
// check which option is selected
});
to get value of the selected option for the select having the id "mySelect" you may use :
$("option:selected", "#mySelect").val()
$("option:selected", "#mySelect").val()
$("#mySelect").change(function() {
if( $("option:selected", "#mySelect").val() == "10" ) {
// do something when value of the option selected is 10
}
});
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@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>
Thanks for the points!
ASKER