Home

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

Published on 13th Jun 2018 in JavaScript

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 Get Selected Text and Value of DropDownList Using jQuery

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> 

Share It
Stay Connected
Like Us on Facebook