Skip to main content

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.


Comments

  1. its really helpfull for all...please post some new techniques vry soon...
    thanks alot sir..

    ReplyDelete

Post a Comment

Popular posts from this blog

Sort Dictionary Based On Value In Asp.Net And C#.Net | Convert Dictionary into KeyValuePair or KeyValuePair into Dictionary.

In this tutorial i am going to explain about how to sort dictionary object based on value in asp.net and C#.Net or convert unsorted dictionary to sorted dictionary object in C#.Net and VB.Net or Convert Dictionary into KeyValuePair or KeyValuePair into Dictionary.

Geckofx Browser in Winform Application

Bored with IE browser in your winform application ? Want to do everything as you doing in your Firefox or Chrome Browser ? Play with automation ? Then here is your choice . Introduction:  GeckoFX is a Windows Forms control written in clean, commented C# that embeds the Mozilla Gecko browser control in any Windows Forms Application. It also contains a simple class model providing access to the HTML and CSS DOM . GeckoFX was originally created by Andrew Young for the fast-growing visual CSS editor, Stylizer . It is now released as open-source under the Mozilla Public License.  You can download it here :   Geckofx 22.0 And the supporting file Xulrunner here :   Xulrunner Files Hope you have downloaded above two files. Here our journey going to start. Create your winform application in visual studio and do the following: right click the toolbox -> Choose items -> Browse the "Geckofx-winforms.dll" and click "yes" for “Load it anyw...

Code to create log files in C#.Net|Asp.Net

Introduction: In my previous article I have explained about how to create, delete and check whether the directory exists using C#.Net . In this article I am going to explain about  How to create log files in C#.Net. Explanation: Log files are useful to track any runtime errors and exceptions in all the applications. Below code will code will get the Message and Pagename as the input and creates the log file in that date. For that first i have imported below two namespaces.