In this article I will explain how to get selected Text and Value of HTML Select DropDownList on Button click using jQuery.
Get selected Text and Value of DropDownList on Button click using jQuery
The following HTML Markup consists of an HTML Select DropDownList and a Button. The HTML Button has been assigned a jQuery OnClick event handler.
Inside the jQuery OnClick event handler, the HTML Select DropDownList object is referenced and then the selected Text and Value is determined and displayed using JavaScript alert message box.
Select Fruit:
<select id="ddlFruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<input type="button" id = "btnGet" value="Get Selected Text Value" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
var selectedText = $("#ddlFruits").find("option:selected").text();
var selectedValue = $("#ddlFruits").val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
});
});
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
DropDownList_Button_Click.zip