jQuery | Get Selected Value and Text from Dropdown/ Selectbox

We can get value and text value of the option selected in the Dropdown using jQuery val() and text() methods.

For getting the value of the selected option from Dropdown use val() method and for text string available for the selected option will be retrieved using text() method as shown below:

        <select id="myDropDown" class="form-control">
            <option value="0">Select Value 0</option>
            <option value="8">Option value 8</option>
            <option value="5">Option value 5</option>
            <option value="4">Option value 4</option>
        </select>

 

Binding Change Event on Select Dropdown

Using the id selector, bind a change event and get value and text string

    <script>
        $(function () {

            $("#myDropDown").change(function () {
                
				// Fetching Value
				console.log($(this).val());
                
				// Fetching Text
				console.log($(this).find('option:selected').text());
                
				alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
            });

        });
    </script>

Getting on Button Click

We can also get value and text using the ID selector of Dropdown control

    <script>
        $(function () {

            $("button").click(function () {
			
	        // Fetching Value
                console.log($("#myDropDown").val());
				
		// Fetching Text
                console.log($('#myDropDown option:selected').text());
				
                alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
            });

        });
    </script>

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments