LaravelCode

Search

How to Get the Value of Selected Option in a Select Box Using jQuery

jQuery
3521 views 4 years ago
post-title

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.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>

If the value for an option is not defined specifically, the text content of the <option> element will be used as a value instead, as demonstrated in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Text</title>
<script src="https://code.jquery.com/jquery-1.12.4.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>United States</option>
            <option>India</option>
            <option>United Kingdom</option>
        </select>
    </form>
</body>
</html>

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-1.12.4.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>

 

Random Articles
Advertise