Automatically change DropDownList selected item on every 30 seconds using JavaScript in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

Hi!

I want change drop down list items automatically after 30 seconds. For example after run program show cars,after it show Animals till oceans when finished then start from cars automaticaly always must work like carousel images.

namespace AutoRefreshItems
{
    public partial class autoForm : System.Web.UI.Page
    {
        protected void Page_Init(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("OptionValue");
            dt.Columns.Add("OptionText");
            dt.Rows.Add("0", "Cars");
            dt.Rows.Add("1", "Animals");
            dt.Rows.Add("2", "Cumputers");
            dt.Rows.Add("3", "Televisions");
            dt.Rows.Add("4", "Oceans");
            drpList.DataSource = dt;
            drpList.DataTextField = "OptionText";
            drpList.DataValueField = "OptionValue";
            drpList.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void drpList_SelectedIndexChanged(object sender, EventArgs e)
        {
            Label1.Text = drpList.SelectedItem.Text;
        }
    }
}

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="autoForm.aspx.cs" Inherits="AutoRefreshItems.autoForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="drpList" runat="server" OnSelectedIndexChanged="drpList_SelectedIndexChanged" AutoPostBack="True">
        </asp:DropDownList>
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>
Posted one year ago

Hi PRA,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" language="javascript">
    window.onload = function () {
        var dropDownOptions = document.getElementById('drpList');
        var counter = 1;
        setInterval(function () {
            document.getElementById('drpList')[counter].selected = true;
            document.getElementById('Label1').innerHTML = dropDownOptions[counter].text;
            counter++;
            if (counter == dropDownOptions.length) {
                counter = 0;
            }
        }, 2000); // Change 2000 with 30000 for 30 secs.
    };
</script>
<asp:DropDownList ID="drpList" runat="server" OnSelectedIndexChanged="drpList_SelectedIndexChanged"
    AutoPostBack="True">
</asp:DropDownList>
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>

Code

C#

protected void Page_Init(object sender, EventArgs e)
{
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.Add("OptionValue");
    dt.Columns.Add("OptionText");
    dt.Rows.Add("0", "Cars");
    dt.Rows.Add("1", "Animals");
    dt.Rows.Add("2", "Cumputers");
    dt.Rows.Add("3", "Televisions");
    dt.Rows.Add("4", "Oceans");
    drpList.DataSource = dt;
    drpList.DataTextField = "OptionText";
    drpList.DataValueField = "OptionValue";
    drpList.DataBind();
}

protected void drpList_SelectedIndexChanged(object sender, EventArgs e)
{
    Label1.Text = drpList.SelectedItem.Text;
}

VB.Net

Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As System.Data.DataTable = New System.Data.DataTable()
    dt.Columns.Add("OptionValue")
    dt.Columns.Add("OptionText")
    dt.Rows.Add("0", "Cars")
    dt.Rows.Add("1", "Animals")
    dt.Rows.Add("2", "Cumputers")
    dt.Rows.Add("3", "Televisions")
    dt.Rows.Add("4", "Oceans")
    drpList.DataSource = dt
    drpList.DataTextField = "OptionText"
    drpList.DataValueField = "OptionValue"
    drpList.DataBind()
End Sub

Protected Sub drpList_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    Label1.Text = drpList.SelectedItem.Text
End Sub

Screenshot