AspnetO

We code, that works!

  • Home
  • Asp.net
  • MVC
  • Interview Questions

Set Asp.net DropDownList Selected Value in JavaScript

By: Mayank Modi | Folls In: Asp.net | Last Updated: Apr 16, 2015

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.

Now here in this tutorial, I’ll explain how to set the asp.net dropdown list selected value text from client-side using javascript as well as jquery with sample demo and example code.

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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</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:

<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;
       }
</script>

Using of Above Functions

For JavaScript: setSubjectUsingJavaScript();
For jQuery: setSubjectUsingJquery();
You may also like, how to get asp.net dropdownlist selected value using jquery and get asp.net dropdownlist selected value using javascript here.

HTML Markup – [.aspx]

Following is the complete HTML Markup code for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<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">&nbsp;&nbsp;</td>
                       </tr>
                       <tr>
                               <td>Select Using</td>
                               <td>:</td>
                               <td>
                                       <asp:TextBox ID="txtValue" runat="server" ClientIDMode="Static"
                                             placeholder="Index between 0 to 7" />&nbsp;&nbsp;
                                       <asp:Button ID="btnUsingJavaScript" runat="server" Text="Use JavaScript"
                                             OnClientClick="setSubjectUsingJavaScript(); return false;" />&nbsp;&nbsp;
                                       <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.

Note: Here, I’ve added return false; to prevent server-side postbacks. Also added some validation in above functions which will check for error array index out of range.

Signup Today And Get Latest Tutorials For Free!

Subscribe to us and get free latest tutorials notifications whenever we publish a new contents.

About Mayank Modi

Mayank is a web developer and designer who specializes in back-end as well as front-end development. He's a Founder & Chief Editor of AspnetO. If you'd like to connect with him, follow him on Twitter as @immayankmodi.

Share Your Comments & Feedback Cancel reply

Note: To post any code in comment, use <pre>your code</pre>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social Connections

  • 0 Fans
  • 3,360 Followers
  • 21 Followers
  • 49 Followers
  • 1,559 Subscribers

Top Posts

  • CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
  • Tooltip: Show Hide Hint Help Text Example in CSS3 Transition
  • Parser Error While Deploying Website to Server in Asp.net
  • How to split string into Array of Day, Month, Year in Asp.net Using C# Vb.net
  • Get Selected Text Value from DropDownList in Asp.net using JavaScript

Find by Tags

Ado.net Ajax appSettings Asp.net C# CheckBox CheckBoxList ConnectionStrings Control CSS CSS3 Difference Download DropDownList Export Facebook fadeIn fadeOut fadeTo fadeToggle File File Extension FileUpload Function GridView IIS Interview Questions JavaScript jQuery MVC OOP RadioButtonList RDP Repeater Send Mail Solutions Split SQL Stored Procedure TextBox Upload Validation VB Web.config Web Hosting

The Man Behind AspnetO

Mayank Modi

Hi there,

Myself Mayank Modi, a Software Engineer and a blogger from Surat, India.

I'm welcoming you to my blog - AspnetO, a programmers community blog where we code, that works!

I started AspnetO as a hobby and now we're growing day by day. We're now having 2500+ programmers that get benefits and learn new things about website design and development under our community blog.

Here at AspnetO, I write about Beginners to Advance level of tutorials on programming languages like Asp.net using C# and Vb.net, MVC, SQL Server, JavaScript, jQuery etc. In sort, all about Asp.net website development stuff and sometimes sharing tips and tricks that can help you to grow up your programming skills.

You can get more details about me and my blog at About us page.

Subscribe To Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts right to your inbox

Join 1000+ other subscribers

Alexa Traffic Rank

Hot on AspnetO

Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 7036 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6067 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6061 downloads 39.76 KB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2883 downloads 1.01 MB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2852 downloads 1.01 MB
Download This Example

Copyright © 2014 - 2019 · All Rights Reserved.

About | Copyrights | Privacy | Terms | Contact | Advertise | Sitemap
Previous Preview Image Before Uploading to Server Using jQuery
Next Disable Submit Button Once Form Is Submitted Using jQuery