Today, We want to share with you jquery selected option text.In this post we will show you get selected value of dropdown in jquery on change, hear for jquery select dropdown option by value we will give you demo and example for implement.In this post, we will learn about jQuery Get the Text Value of Selected Options with an example.

How do I get the text value of a selected option?

Contents

Get Selected Option Text of HTML SELECT using jQuery

Example 1: index.html

<select id="productsList">
    <option value="1">Mobile</option>
    <option value="2">Laptop</option>
</select>
<input type="button" id="productdata" value = "ProductData" />
<script type="text/javascript">
    $("#productdata").live("click", function () {
        //Get text or inner html of the selected options
        var selectedText = $("#productsList option:selected").html();
        alert(selectedText);
    });
</script>

Get text of the selected options with jQuery

$('#your_select_2 option:selected').html()

Get Selected Options from Multiple Select Box

Example 3: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Multiple Selected Option Value - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $("button").click(function(){
        var products = [];
        $.each($(".product option:selected"), function(){            
            products.push($(this).val());
        });
        alert("You have selected the product - " + products.join(", "));
    });
});
</script>
</head>
<body>
    <form>
        <label>Product:</label>
        <select class="product" 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>

Use the jQuery :selected Selector

Example 3: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Options Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.product").change(function(){
        var selectedProduct = $(this).children("option:selected").val();
        alert("You have selected the product - " + selectedProduct);
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select Product:</label>
        <select class="product">
            <option value="usa">United States</option>
            <option value="india">India</option>
            <option value="uk">United Kingdom</option>
        </select>
    </form>
</body>
</html>

I hope you get an idea about How to Get the Text Value of Selected Options using jQuery?.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

How do I get the text value of a selected option?

Get Selected Options from Multiple Select Box

Use the jQuery :selected Selector

Related posts: