Now here in this tutorial, I’ll explain how to set the asp.net dropdownlist selected value text from client-side using javascript as well as jquery with sample demo and example code.
In my previous tutorials, I’d explained about how to bind data to asp.net gridview, gridview insert update delete data using parameterized query, difference between executereader executenonquery and executescalar and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.
There are many ways to set the asp.net dropdownlist selected value, here I shared my best two approaches for the same. So follow the following simple two javascript functions in two versions
.
.
you’ve choice here to pick up any one 😉 that is pure JavaScript and jQuery. You can call any function on asp.net button click event or use wherever you need!
jQuery Function To Set DropDownList Selected Value
Following is the function for jQuery that will set the selected value or text from the dropdown list:
</script>
<script type=”text/javascript”>
function setSubjectUsingJquery() {
//get dropdownlist object
var myDropDown = $(“select#ddlSubject”);
var selVal = $(“input#txtValue”).val();
if ((myDropDown.find(‘option’).length – 1) >= selVal) {
myDropDown.val(selVal);
} else {
alert(“jQuery: Index out of range!”);
}
return false;
}
</script>
JavaScript Function To Set DropDownList Selected Value
Following is the function for JavaScript that will return the selected value or text from the dropdown list:
function setSubjectUsingJavaScript() {
//get dropdownlist object
var myDropDown = document.getElementById(“ddlSubject”);
var selVal = document.getElementById(“txtValue”).value;
if ((myDropDown.length – 1) >= selVal) {
myDropDown.selectedIndex = selVal;
} else {
alert(“JavaScript: Index out of range!”);
}
return false;
}
</script>
Using of Above Functions
For jQuery: setSubjectUsingJquery();
HTML Markup – [.aspx]
Following is the complete HTML Markup code for .aspx page:
<head id=”Head1″ runat=”server”>
<title>Set Asp.net DropDownList Selected Value Text Using JavaScript
jQuery</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
function setSubjectUsingJavaScript() {
//get dropdownlist object
var myDropDown = document.getElementById(“ddlSubject”);
var selVal = document.getElementById(“txtValue”).value;
if ((myDropDown.length – 1) >= selVal) {
myDropDown.selectedIndex = selVal;
} else {
alert(“JavaScript: Index out of range!”);
}
return false;
}
function setSubjectUsingJquery() {
//get dropdownlist object
var myDropDown = $(“select#ddlSubject”);
var selVal = $(“input#txtValue”).val();
if ((myDropDown.find(‘option’).length – 1) >= selVal) {
myDropDown.val(selVal);
} else {
alert(“jQuery: Index out of range!”);
}
return false;
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<table>
<tr>
<td>Select any Subject</td>
<td>:</td>
<td>
<asp:DropDownList ID=”ddlSubject” runat=”server” ClientIDMode=”Static”>
<asp:ListItem Value=”0″ Text=”Please select” />
<asp:ListItem Value=”1″ Text=”HTML” />
<asp:ListItem Value=”2″ Text=”CSS” />
<asp:ListItem Value=”3″ Text=”JavaScript” />
<asp:ListItem Value=”4″ Text=”jQuery” />
<asp:ListItem Value=”5″ Text=”Asp.net” />
<asp:ListItem Value=”6″ Text=”PHP” />
<asp:ListItem Value=”7″ Text=”Android” />
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td>Select Using</td>
<td>:</td>
<td>
<asp:TextBox ID=”txtValue” runat=”server” ClientIDMode=”Static”
placeholder=”Index between 0 to 7″ />
<asp:Button ID=”btnUsingJavaScript” runat=”server” Text=”Use JavaScript”
OnClientClick=”setSubjectUsingJavaScript(); return false;” />
<asp:Button ID=”btnUsingJquery” runat=”server” Text=”Use jQuery”
OnClientClick=”setSubjectUsingJquery(); return false;” />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
As you can see from the above example, I’ve created separate functions, that is setSubjectUsingJavaScript() for JavaScript and setSubjectUsingJquery() for jQuery and then called it on button click event as OnClientClick=”setSubjectUsingJavaScript(); return false;” for JavaScript and OnClientClick=”setSubjectUsingJavaScript(); return false;” for jQuery.
