If you need to bind a function to be called when a user selects an option from a select box using jQuery, you’ve come to the right place.
There are several different ways to skin this cat, but basically here is what we are going to do:
1. Bind a change event listener to the select box itself
2. When the box is changed, call a function that detects and retrieves the selected value
Here’s the code:
$("#selectBoxId").change(function(){
var selectedValue = $(this).find(":selected").val();
console.log("the value you selected: " + selectedValue);
});
Let’s break it down line by line.
Line 1:
$("#selectBoxId").change(function(){
$("#selectBoxId") grabs the DOM element out of the html and makes a jQuery object.
.change(function(){}); binds a function to the change event of the select box. Any time anyone changes the selection in the select box this function will fire off
Line 2:
var selectedValue = $(this).find(":selected").val();
var selectedValue creates a new variable that the selected value will be stored in.
$(this) creates a jQuery object based on the select box that triggered the function.
.find(":selected") looks a the select box that triggered the function and finds the option that got selected.
.val() gets the “value” of the selected option.
Line 3:
console.log("the value you selected: " + selectedValue);
this just calls the firebug console in firefox and tells it you want to print something out to it. You don’t need this line, but this line shows you that the above code did indeed grab the selected value out of the select box.
Line 4:
});
This just closes the open change function started on line 1.
This code assumes that you have an HTML select box with an id of “selectBoxId”. If you have a series of select boxes that all need the same function bound to them for some reason you can give them all the same class name (say “selectBoxesClass”) and select them like so: $(“.selectBoxesClass”).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Conforming XHTML 1.0 Strict Template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#selectBoxId").change(function(){
var selectedValue = $(this).find(":selected").val();
console.log("the value you selected: " + selectedValue);
});
});
</script>
</head>
<body>
<select id="selectBoxId">
<option>Foo</option>
<option>Bar</option>
<option selected="selected">Beh</option>
</select>
</body>
</html>
Here are some resources for further reading:
jQuery
jQuery change
jQuery find
jQuery val
jQuery :selected selector
jQuery Element selector
jQuery id selector
jQuery class selector
Firefox
Firebug
Firebug Console
About the Author
[...] the original post: Using jQuery to bind a function to a select box change and … If you enjoyed this article please consider sharing [...]
You can retrieve the text value of the select box by modifying line 2 to say:
var selectedValue = $(this).find(“:selected”).text();
This is useful if you have a select menu like:
<option value=”234″>An Option</option>
And you want to retrieve “An Option” instead of “234″.