Skip to content
Related Articles

Related Articles

How to get selected text from a drop-down list using jQuery?
  • Last Updated : 30 Apr, 2019

We can select text or we can also find the position of a text in a drop down list using option:selected attribute or by using val() method in jQuery.

By using val() method :
The val() method is an inbuilt method in jQuery which is used to return or set the value of attributes for the selected elements.

Syntax :

$(selector).val(parameter)

Parameter : parameter is optional.

Example :






<html>
<head>
    <title>jQuery Selector</title>
<script src=
</script>
    <script>
        $(document).ready(function() {
            $("#submit").click(function() {
                alert($("#myselection").val());
            });
        });
    </script>
    <style>
        div {
            width: 50%;
            height: 200px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div>
  
        <p>The selected value:</p>
        <select id="myselection">
            <option value="1">First</option>
            <option value="2">Second</option>
        </select>
        <br>
        <br>
        <button id="submit">Submit</button>
  
    </div>
</body>
</html>

Output :
Before click on the button.

After click on the button.

By using option:selected :
The option:selected method is a way in jQuery which is used to return the selected element from a list of the element.

Syntax :

 $("#selector option:selected");

Parameter : No parameter required.

Example :




<html>
<head>
    <title>jQuery Selector</title>
<script src=
</script>
  
    <script>
        $(document).ready(function() {
            $("#submit").click(function() {
                var value = $("#myselection option:selected");
                alert(value.text());
            });
        });
    </script>
    <style>
        div {
            width: 50%;
            height: 200px;
            padding: 10px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div>
  
        <p>The selected value:</p>
        <select id="myselection">
            <option value="1">First</option>
            <option value="2">Second</option>
        </select>
        <br>
        <br>
        <button id="submit">Submit</button>
  
    </div>
</body>
</html>

Output :
Before click on the button.

After click on the button.

My Personal Notes arrow_drop_up
Recommended Articles
Page :