Home Asp.net Set Asp.net DropDownList Selected Value in JavaScript

Set Asp.net DropDownList Selected Value in JavaScript

228
0
Redirect Page on Button Click

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 type="text/javascript" src="https://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>
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.

Using of Above Functions

For JavaScript: setSubjectUsingJavaScript();
For jQuery: setSubjectUsingJquery();

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 or jQuery
    </title>
    <script type="text/javascript" src="https://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.

Previous articleImage Preview Before Upload Using jQuery or JavaScript in Asp.net
Next articleDisable Submit Button Once Form Is Submitted Using jQuery
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twenty + two =