Preselect html select/drop down value based on text in asp.net

Introduction:

In this article I am going to explain about how to preselect asp drop down or html select value based on a text.

Description:

In some cases we are in the situation to preselect the drop down or html select option based on some text. Here I am explaining this process using javascript code. For the explanation purpose I have a form. In that form I have a html select with id “select_cities”. This select have three options and each option have some values. In this scenario I am supposed to select the option with the text “Kanna”. For this I have written a javascript function “test”.Below is the code used.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <select id="C">

            <option value="0">select name</option>

            <option value="1">kanna</option>

            <option value="2">dasan</option>

        </select>

    </div>

    <script type="text/javascript">

        window.onload = test;

        var name = "kanna";

        function test() {

            for (var i = 0; i < document.getElementById("select_cities").length; i++) {

                if (document.getElementById("select_cities").options[i].text == name) {

                    var a = document.getElementById("select_cities").options[i].value;

                    document.getElementById("select_cities").value = a;

                }

            }

        }      

    </script>

    </form>

</body>

</html>

In the above code the javascript function through the for loop first gets the option value of that particular  text. After that set the options value to that value.

Do you like this article. Then comment here or share with your friends. Or like our facebook page.