How To Get Selected Text and Value of DropDownList Using JavaScript and jQuery

In this tutorial,we will learn how to get selected text and value of dropdown list by onchange event using jQuery and JavaScript. When user select dropdown text , then text and value is retrieved with jquery onchange event. A simple function is created to get dropdown text and value using JavaScript. So. let us see how to get the value/text of selected dropdown using  jQuery and JavaScript.

How to Create Dropdown With Search Box Using jQuery
Dynamic Dependent Select Box Using jQuery,Ajax and PHP

Using jQuery

HTML

<select id="drop">
<option value="1"> PHP</option>
<option value="2"> Mysql</option>
</select>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("#drop").change(function() {

var txt = $("#drop option:selected").text();

var val = $(this).val();

alert("Text : " + txt + " Value : " +val )

});
});
</script>

Using JavaScript

HTML

<select id="drop" onchange="getSelect(this)">
<option value="1"> PHP</option>
<option value="2"> Mysql</option>
</select>

JavaScript

<script>
function getSelect(selectoption) {


var optionText = selectoption.options[selectoption.selectedIndex].text;
var optionValue = selectoption.value;

alert("Text : " + optionText  + ' Val ' + optionValue );

}
</script>