How to Get Selected Option Value Using jQuery
Simple jQuery code snippet to loop select box options (drop down boxes) in a form to get the values and text from each option. Useful for manipulating values in form select boxes.
Example 1.
$('#select > option').each(function() {
alert($(this).text() + ' ' + $(this).val());
});
$('#select > option:selected').each(function() {
alert($(this).text() + ' ' + $(this).val());
});
This function will return an array of text/value pairs for the selects matching the given class.
function getSelects(klass) {
var selected = [];
$('select.' + klass).children('option:selected').each( function() {
var $this = $(this);
selected.push( { text: $this.text(), value: $this.val() );
});
return selected;
}
You may like
- Json in js | Get value from json object in javascript
- how to get data from json array in php | json in php
- What is Encode and Decode JSON Data in PHP | JSON in php
- Javascript interview Queand & Ans 2022 Beginners
Example 2.
Option value Property
Alert the value of the selected option in a drop-down list:
var x = document.getElementById("mySelect").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
Use the jQuery : selected Selector
You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list.
Let’s try out the following example to understand how it basically works:
Example 3.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery Get Selected Option Value</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script>$(document).ready(function(){ $("select.country").change(function(){ var selectedCountry = $(this).children("option:selected").val(); alert("You have selected the country - " + selectedCountry); });});</script></head> <body> <form> <label>Select Country:</label> <select class="country"> <option value="usa">United States</option> <option value="india">India</option> <option value="uk">United Kingdom</option> </select> </form></body></html>
Get Selected Options from Multiple Select Box
Similarly, you can retrieve the selected values from multiple select boxes with a little trick.
A multiple select box allows a user to select multiple options. Hold down the control key on Windows or command key on Mac to select multiple options. You can enable multiple section in a select box by adding the attribute multiple to the <select> tag. Here’s an example:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery Get Multiple Selected Option Value</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script>$(document).ready(function() { $("button").click(function(){ var countries = []; $.each($(".country option:selected"), function(){ countries.push($(this).val()); }); alert("You have selected the country - " + countries.join(", ")); });});</script></head><body> <form> <label>Country:</label> <select class="country" multiple="multiple" size="5"> <option>United States</option> <option>India</option> <option>United Kingdom</option> <option>Brazil</option> <option>Germany</option> </select> <button type="button">Get Values</button> </form></body></html>
Press control key (Ctrl) to select multiple values:
You may like
- Json in js | Get value from json object in javascript
- how to get data from json array in php | json in php
- What is Encode and Decode JSON Data in PHP | JSON in php
- Javascript interview Queand & Ans 2022 Beginners
- How to send email from PHP without SMTP server
- PHP Basic Interview Questions and Answers in Hindi
- difference between echo, print, and print_r in PHP
You may like 2