jQuery Select Drop Down Value Examples
Of all the form elements, one of the most important form element is the select drop down list. If you have worked with a select drop down list before, you would know how beneficial it would be to show lots of information, in a contained area.. So do you know how to select drop down value using jQuery? If not, then this article is for you. In this article, I am going to show how to get selected value in drop down using jQuery, with easy to follow examples. Read on to find out.
Examples to Get Select Dropdown Value using jQuery
Let’s assume that we have a “States” drop down in our page. Now we want to get selected value in drop down when a button is clicked. We will simply alert the selected drop down value for example purposes. I am going to discuss 2 ways to use jQuery to select drop down value & provide you with the source code as well.
Example: Here is the complete source code to get dropdown selected value using jQuery:
<html>
<head>
<title>jQuery Select Drop Down Value | jQuery Get Selected Value In Dropdown </title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<select name="country" id="country">
<option value="australia">Australia</option>
<option value="london">London</option>
<option value="usa">USA</option>
</select>
<input type="submit" name="get" id="get" value="Get selected value" />
<script type="text/javascript">
$('#get').click(function() {
//Select Drop Down Value - Method 1
alert( 'Value is '+ $("#country").val() );
//Select Drop Down Value - Method 2
alert( 'Value is '+ $("#country option:selected").val() );
return false;
});
</script>
</body>
</html>From the above code, we now see that we can use any of the 2 methods. I would prefer Method 1 for simplicity sake.
Now that you know how to use jQuery to select drop down value, do you know how to get the Label of the selected drop down value? Here is how you can get selected drop down label using jQuery:
$('#get').click(function() {
//Select Drop Down Text - Method 1
alert( 'Text is '+ $("#country option:selected").text() );
//Select Drop Down Text - Method 2
alert( 'Text is '+ $("#country option:selected").html() );
return false;
});Just replace the jQuery code from earlier example with the code above and run it. When you click the button, you will see that the item label of the selected value in drop down is alerted twice. Both the methods achieve the same thing, so it’s up to you whatever you want to feel like using.
Simple, isn’t it?
Do you know of any other ways to get select drop down value jQuery? Feel free to suggest by commenting below.