LearnFast.Ninja

jQuery get value of select option selected

Select the selected option using the selected selector and use val function for the value. Test our working example code.

Step 1: Select the selected option using the selected selector and use val function for the value. 
$("#MySelectBox option:selected").val();
 
Working example code: 

<html>

<head>

    <title>Untitled Page</title>

    <script type="text/javascript"

        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        function Show_Selected_Value() {

            var value = $("#MySelectBox option:selected").val();

            alert("value: " + value);

        }

    </script>

</head>

<body>

    <select id="MySelectBox">

        <option value="1">Option 1</option>

        <option value="2">Option 2</option>

        <option value="3">Option 3</option>

    </select>

    <div onclick="Show_Selected_Value()" style="cursor: pointer; text-decoration: underline; color: blue;">

        Show selected value

    </div>

</body>

</html>

 
Result:


Tags

jquery

selected option select select-box val value select-option