Display value of DropDownList SelectedItem on a label

Question

Display value of DropDownList SelectedItem on a label

Donald Symmons 3,066

Hello,

I have been trying to show the value of DropDownList selecteditem in a label but all efforts could not yield desired result. I have a table Data as follows:

Id	Fruits colors
1	Apple Red
2	Banana Yellow

The Fruits are the items and the values are colors.

The Data in the Fruits column are populated inside a DropDownList items, as shown in the below code. I want it that when user selects a fruit, the value of the SelectedItem in the DropDownList will be attached to a label and be displayed. For example if user selects Banana, then the value will be Yellow and will be attached and displayed in the label.

<asp:UpdatePanel ID="FruitPanel" runat="server" AutoPostBack="true" CssClass="form-control" Font-Size="9pt">                                                 <ContentTemplate>                                                     <asp:Label ID="LabelSymbol" runat="server" Text="Label"></asp:Label>                                                     <div style="margin: 0 auto; padding: 10px; margin-top: 0%;">                                                         <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Font-Size="10pt" OnSelectedIndexChanged="SelectedIndexChanged">                                                         </asp:DropDownList>                                                     </div>                                                 </ContentTemplate>                                                 <Triggers>                                                     <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedFruitColor" />                                                 </Triggers>                                             </asp:UpdatePanel>

This below code populates the items from database on to the DropDownList

private void GetFruitColors()         {             string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;             using (SqlConnection con = new SqlConnection(connectionString))             {                 using (SqlCommand cmd = new SqlCommand("SELECT Colors,Fruits FROM FruitTable", con))                 {                     cmd.CommandType = CommandType.Text;                     cmd.Connection = con;                     con.Open();                     DropDownList1.DataSource = cmd.ExecuteReader();                     DropDownList1.DataTextField = "Fruits";                     DropDownList1.DataValueField = "Colors";                     DropDownList1.DataBind();                     con.Close();                 }             }            // DropDownList1.Items.Insert(0, new ListItem("Select your Fruit Colors", "0"));         }

Then I used this code inside SelectedIndexChanged event

protected void SelectedIndexChanged(object sender, EventArgs e)         {             string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;             using (SqlConnection con = new SqlConnection(connectionString))             {                 using (SqlCommand cmd = new SqlCommand("SELECT * FROM Table WHERE Fruits = @Fruits", con))                 {                     cmd.Parameters.AddWithValue("@Fruits", DropDownList1.SelectedItem.Text);                     cmd.CommandType = CommandType.Text;                     cmd.Connection = con;                     con.Open();                     SqlDataReader dr = cmd.ExecuteReader();                     if (dr.Read())                     {                         DropDownList1.SelectedItem.Text = "Fruits";                         DropDownList1.SelectedItem.Value = "Colors";                         if (DropDownList1.SelectedItem.Text == DropDownList1.SelectedItem.Value)                         {                             LabelColors.Text = DropDownList1.SelectedItem.Value.ToString();                         }                     }                     con.Close();                 }             }         }

SurferOnWww 4,721 Reputation points

2023-10-02T00:33:15.12+00:00

Please write the code with a new line, it makes it easier for us to read.
Donald Symmons 3,066 Reputation points

2023-10-02T07:48:24.43+00:00

@SurferOnWww ,

That did not come from me. I copied my code exactly as it is from my code window and pasted it. And I've been doing this on every of my questions in the past, I don't know how this was shown in one line instead of how code should be displayed.

SurferOnWww 4,721

Copy your code, paste it on the editor of Visual Studio and type ctrl + K + D. It will make your code readable as follows:

<asp:UpdatePanel ID="FruitPanel" runat="server" AutoPostBack="true" CssClass="form-control" Font-Size="9pt">
    <contenttemplate>
        <asp:Label ID="LabelSymbol" runat="server" Text="Label"></asp:Label>
        <div style="margin: 0 auto; padding: 10px; margin-top: 0%;">
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Font-Size="10pt" OnSelectedIndexChanged="SelectedIndexChanged"></asp:DropDownList>
        </div>
    </contenttemplate>
    <triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedFruitColor" />
    </triggers>
</asp:UpdatePanel>

That's what you have to do. Not anybody else.

Accepted answer

0 additional answers

Your answer

SurferOnWww 4,721 Reputation points

2023-10-02T00:33:15.12+00:00

Please write the code with a new line, it makes it easier for us to read.
Donald Symmons 3,066 Reputation points

2023-10-02T07:48:24.43+00:00

@SurferOnWww ,

That did not come from me. I copied my code exactly as it is from my code window and pasted it. And I've been doing this on every of my questions in the past, I don't know how this was shown in one line instead of how code should be displayed.
SurferOnWww 4,721 Reputation points

2023-10-02T08:37:24.1733333+00:00

Copy your code, paste it on the editor of Visual Studio and type ctrl + K + D. It will make your code readable as follows:

<asp:UpdatePanel ID="FruitPanel" runat="server" AutoPostBack="true" CssClass="form-control" Font-Size="9pt"> <contenttemplate> <asp:Label ID="LabelSymbol" runat="server" Text="Label"></asp:Label> <div style="margin: 0 auto; padding: 10px; margin-top: 0%;"> <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Font-Size="10pt" OnSelectedIndexChanged="SelectedIndexChanged"></asp:DropDownList> </div> </contenttemplate> <triggers> <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedFruitColor" /> </triggers> </asp:UpdatePanel>

That's what you have to do. Not anybody else.

Answer 1

Hi @Donald Symmons,

I tested your code and your code contains some minor issues.

First, the front-end code: Label ID is inconsistent, EventName should be "SelectedIndexChanged", and AutoPostBack="true" needs to be placed in DropDownList.

Then the backend: In the SelectedIndexChanged event, there is no need to re-bind data from the database and make a judgment about postback in Page_Load.

Below is the full code. I put the SelectedItem.Text into the label. Then I specify the color of the label based on SelectedItem.Value.

 protected void Page_Load(object sender, EventArgs e)
 {
     if (!IsPostBack)
     {
         GetFruitColors();
     }
 }
 private void GetFruitColors()
 {
     string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString; using (
         SqlConnection con = new SqlConnection(connectionString))
     {
         using (SqlCommand cmd = new SqlCommand("SELECT Colors,Fruits FROM FruitTable", con))
         {
             cmd.CommandType = CommandType.Text;
             cmd.Connection = con; con.Open();
             DropDownList1.DataSource = cmd.ExecuteReader();
             DropDownList1.DataTextField = "Fruits";
             DropDownList1.DataValueField = "Colors";
             DropDownList1.DataBind(); con.Close();
         }
     }
 }
 protected void SelectedIndexChanged(object sender, EventArgs e)
 {
     LabelColors.Text = DropDownList1.SelectedItem.Text.ToString();
     LabelColors.BackColor = System.Drawing.Color.FromName(DropDownList1.SelectedItem.Value.ToString());

 }

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="FruitPanel" runat="server"  CssClass="form-control" Font-Size="9pt">
        <ContentTemplate>
            <asp:Label ID="LabelColors" runat="server" Text="Label"></asp:Label>
            <div style="margin: 0 auto; padding: 10px; margin-top: 0%;">
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" CssClass="form-control" Font-Size="10pt" OnSelectedIndexChanged="SelectedIndexChanged">
                  <asp:ListItem>Choose one</asp:ListItem>
                </asp:DropDownList>
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>
</div>

test1

Best regards,

Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,066 Reputation points

2023-10-02T07:45:27.49+00:00

Hi @Lan Huang,

First, the front-end code: Label ID is inconsistent, EventName should be "SelectedIndexChanged", and AutoPostBack="true" needs to be placed in DropDownList.

About the Label ID, that's an error I did. But for AutoPostback="true", I don't know how that came to be in the UpdatePanel instead of the DropDownList. Then, for EventName, thanks for the correction.
Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2023-10-02T09:29:03.08+00:00

Hi @Donald Symmons,

Have you tried the code I provided?

Are there any updates on this issue? I am glad to help if you have any other questions.

Share via

Display value of DropDownList SelectedItem on a label

0 additional answers

Your answer