JavaScript Get Selected Option Text Example

Jun 14, 2021 . Admin

Hello Friends,

Now let's see example of how to get selected option text example. We will use how to get selected option text in javascript. Here you will learn how to use javascript get selected option text. This is a short guide on get selected option text. Let's get started with how to get selected option text in javascript.

Here i will give you many example how you can get selected option text javascript.

Example : 1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Get Selected Option Text Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body> 
        <div class="container mt-5"> 
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="text-center">JavaScript Get Selected Option Text</h3>
                        </div>  
                        <div class="card-body">
                            <p>Change text of an option element in a drop-down list:</p>
                            Select your subject:
                            <select class="form-control">
                                <option id="JavaScript">JavaScript</option>
                                <option id="Laravel">Laravel</option>
                                <option id="PHP">PHP</option>
                                <option id="CS">CS</option>
                            </select><br>
                            <button class="btn btn-primary mt-3" onclick="stud()">Check it</button>
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
    function stud() {
        document.getElementById("JavaScript").text = "newTextForLaravel";
    }
    </script>
</html>
Output : 
Select your subject: newTextForLaravel
Example : 2 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Get Selected Option Text Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="text-center">JavaScript Get Selected Option Text</h3>
                        </div>
                        <div class="card-body">
                            <p>Return text of the selected option in a drop-down list:</p>

                            Select your Hobby:
                            <select class="form-control" onchange="myFunction(this)">
                                <option>Dancing</option>
                                <option>Reading</option>
                                <option>Sports</option>
                                <option>Other Activity</option>
                            </select>
                            <p id="stud" class="mt-2"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function myFunction(test) {
            var a = test.options[test.selectedIndex].text;
            document.getElementById("stud").innerHTML = "You selected: " + a;
        }
    </script>
</html>
Output : 
Select your Hobby: Sports
You selected: Sports

It will help you...

#Javascript

You might also like...