Introduction:
In this article I will explain how to get dropdown selected value and text in JavaScript and jQuery .
Following Javascript is used to get value of dropdown:
<script type="text/javascript">
function GetSelectedTextValue()
{
var ddlEmp
= document.getElementById("ddlEmp");
var selectedText
= ddlEmp.options[ddlEmp.selectedIndex].innerHTML;
var selectedValue
= ddlEmp.value;
alert("Selected
Text: " + selectedText + " Value: " +
selectedValue);
}
</script>
Following jQuery Script is used to get value of dropdown:
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
var
selectedText = $("#ddlEmp").find("option:selected").text();
var
selectedValue = $("#ddlEmp").val();
alert("Selected
Text: " + selectedText + " Value:
" + selectedValue);
});
});
</script>
Full
Source Code for sample Application(Jquery):
Design your Page as given
Below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validate HTML dropdown using Javascript</title>
</head>
<body>
<form id="form1">
<center>
<fieldset style="width:350px">
<legend><strong>Validate HTML dropdown using Javascript</strong></legend>
<br
/>
Select Employee:
<select id="ddlEmp">
<option
value=""></option>
<option
value="1">Ashish</option>
<option
value="2">Anuj</option>
<option
value="3">Anil</option>
</select>
<input id="btnGet"type="submit" value="Get Selected Text" onclick="return
Validate()" />
<br /><br />
<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 = $("#ddlEmp").find("option:selected").text();
var
selectedValue = $("#ddlEmp").val();
alert("Selected
Text: " + selectedText + " Value:
" + selectedValue);
});
});
</script>
</fieldset>
</center>
</form>
</body>
</html>
0 comments:
Post a Comment