jQuery Get Select Value Examples
Have you wondered how to use jQuery to get Select value? The select value can be easily obtained by using just single line of code. Follow along for more info.
How to Get Select Value with jQuery
Let’s assume that you have a Select with ID “states”. You can now get the selected option value using jQuery in the following ways:
Here is the HTML source for the following example:
<select name="states" id="states"> <option value="Texas">Texas</option> <option value="Alabama">Alabama</option> <option value="Chicago">Chicago</option> </select>
Example 1: Get Select value using val() on page load using jQuery
<script type="text/javascript">
$(document).ready(function() {
var value = $("#states").val();
alert(value);
});
</script>When you execute the above code, you will see a JavaScript alert the value of the first option as the selected . To assign some value to the Select and get it’s value when the page loads, try the HTML source below and execute the code:
Here is the HTML source for the following example:
<select name="states" id="states"> <option value="Texas">Texas</option> <option value="Alabama">Alabama</option> <option value="Chicago" selected="selected">Chicago</option> </select>
You will now see that the JavaScript alert says: Chicago
So that’s how you can get Selected option value on document load.
Example 2: Get Select value when it’s value on change using change() in jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#states").change(function(){
var value = $(this).val();
alert(value);
});
});
</script>What the above jQuery does is that it alerts the value of the Selected option as soon as a different option is selected, without any delay.
Example 3: Get Select value using it’s name attribute using jQuery
<script type="text/javascript">
$(document).ready(function() {
$("input[name='states']").change(function(){
var value = $(this).val();
alert(value);
});
});
</script>If you have noticed, I am targeting the Select by using it’s name in the above code. That’s how you can get Select value using name in jQuery.
Example 4: Get Select value using it’s Class using jQuery
HTML Source:
<input name="states" type="text" id="states" class="states_class" />
<script type="text/javascript">
$(document).ready(function() {
$(".states_class").change(function(){
var value = $(this).val();
alert(value);
});
});
</script>In the above code, the Select is targeted using the “states_class” applied to the Select. So now whenever the content of the “states” Select is changed, its value will be shown in alert.
Example 5: Get Select value using blur() using jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#states").blur(function(){
var value = $(this).val();
alert(value);
});
});
</script>What the above jQuery does is that it alerts the value of the Select instanlty as it is changed. This works same as the change() method in this context.
That’s it for now!
Do you know of any other ways to get Select value using jQuery or to get selected value of select dropdown using jQuery? Feel free to share by commenting below.