How to Get Selected Option Value Using jQuery

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 Comments

Add a Comment

Your email address will not be published.