How to Get Selected Option Value Using jQuery

How to Get Selected Option Value Using jQuery

by

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

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

 

You may like 2

3 thoughts on “How to Get Selected Option Value Using jQuery”

Leave a Comment