locked
Dropdown List Selected Value based on another Dropdown List RRS feed

  • Question

  • User-1314346660 posted

    Hello experts,

    On my page I have 2 drop down lists. The user can select any value from either list and any combination of the two values.

    I want the value in drop down list 2 to default to a particular option based on the value of drop down list 1. However, I want the user to be able to change the value in drop down list 2 if they choose.

            <asp:DropDownList
                ID="DropDownList1"
                runat="server"
                Autopostback="true">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Fish</asp:ListItem>
                <asp:ListItem>Vegetable</asp:ListItem>
                <asp:ListItem>Chicken</asp:ListItem>
            </asp:DropDownList>
            <br />
            <br />
            <asp:DropDownList
                ID="DropDownList2"
                runat="server">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Rice</asp:ListItem>
                <asp:ListItem>Pasta</asp:ListItem>
                <asp:ListItem>Potato</asp:ListItem>
            </asp:DropDownList>

    So in the example above, I want the following to happen:

    CASE
    WHEN DropdownList1 = 'Fish' THEN DropDownList2 = 'Rice'
    WHEN DropdownList1 = 'Vegetable' THEN DropDownList2 = 'Pasta'
    WHEN DropdownList1 = 'Chicken' THEN DropDownList2 = 'Potato'
    END

    So that the default value in dropdown list 2 is set by the value in drop down list 1. 

    Thanks to everyone. Stay safe.

    Billson3000

    WHEN DropdownList1 = '' THEN  

    Tuesday, April 7, 2020 9:17 AM

Answers

  • User415553908 posted

    If I'm getting your problem statement here, you could pre-associate your list values and employ OnSelectedIndexChanged event to handle the default value change:

     public partial class _Default : Page
        {
            public static List<KeyValuePair<string, string>> Values { get; set; } = new List<KeyValuePair<string, string>>
            {
                new KeyValuePair<string, string>("Fish", "Rice"),
                new KeyValuePair<string, string>("Vegetable", "Pasta"),
                new KeyValuePair<string, string>("Chicken", "Potato")
            }; // I needed something to pair the strings up. you can opt for any other means as long as you can match items
    
            public static List<ListItem> List1Items => Values.Select((v, i) => new ListItem(v.Key, i.ToString())).ToList(); // just to simplify item rendering
            public static List<ListItem> List2Items => Values.Select((v, i) => new ListItem(v.Value, i.ToString())).ToList();
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    
                    // inserting empty list item in front of the list to be your default value
                    List1Items.Insert(0, new ListItem()); 
                    List2Items.Insert(0, new ListItem()); // inserting empty list item in front of the list to be your default value
    
                    // i chose to data-bind the list items but your case might be different
                    DropDownList1.DataSource = List1Items;
                    DropDownList1.DataBind();
                    DropDownList2.DataSource = List2Items;
                    DropDownList2.DataBind();
                }
            }
    
            protected void DropDownList1_OnSelectedIndexChanged(object sender, EventArgs e)
            {
                DropDownList2.SelectedIndex = DropDownList1.SelectedIndex; // this trick is extremely easy to pull off as long as indexes of two dropdowns match. you might have more complex scenario but the idea with selectedIndex will likely still work 
            }
        }
    <asp:DropDownList
                ID="DropDownList1"
                runat="server"
                Autopostback="true"  
                OnSelectedIndexChanged="DropDownList1_OnSelectedIndexChanged">
            </asp:DropDownList>
            <br />
            <br />
            <asp:DropDownList
                ID="DropDownList2"
                runat="server"
                Items="List2Items">
            </asp:DropDownList>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 7, 2020 9:58 AM

All replies

  • User415553908 posted

    If I'm getting your problem statement here, you could pre-associate your list values and employ OnSelectedIndexChanged event to handle the default value change:

     public partial class _Default : Page
        {
            public static List<KeyValuePair<string, string>> Values { get; set; } = new List<KeyValuePair<string, string>>
            {
                new KeyValuePair<string, string>("Fish", "Rice"),
                new KeyValuePair<string, string>("Vegetable", "Pasta"),
                new KeyValuePair<string, string>("Chicken", "Potato")
            }; // I needed something to pair the strings up. you can opt for any other means as long as you can match items
    
            public static List<ListItem> List1Items => Values.Select((v, i) => new ListItem(v.Key, i.ToString())).ToList(); // just to simplify item rendering
            public static List<ListItem> List2Items => Values.Select((v, i) => new ListItem(v.Value, i.ToString())).ToList();
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    
                    // inserting empty list item in front of the list to be your default value
                    List1Items.Insert(0, new ListItem()); 
                    List2Items.Insert(0, new ListItem()); // inserting empty list item in front of the list to be your default value
    
                    // i chose to data-bind the list items but your case might be different
                    DropDownList1.DataSource = List1Items;
                    DropDownList1.DataBind();
                    DropDownList2.DataSource = List2Items;
                    DropDownList2.DataBind();
                }
            }
    
            protected void DropDownList1_OnSelectedIndexChanged(object sender, EventArgs e)
            {
                DropDownList2.SelectedIndex = DropDownList1.SelectedIndex; // this trick is extremely easy to pull off as long as indexes of two dropdowns match. you might have more complex scenario but the idea with selectedIndex will likely still work 
            }
        }
    <asp:DropDownList
                ID="DropDownList1"
                runat="server"
                Autopostback="true"  
                OnSelectedIndexChanged="DropDownList1_OnSelectedIndexChanged">
            </asp:DropDownList>
            <br />
            <br />
            <asp:DropDownList
                ID="DropDownList2"
                runat="server"
                Items="List2Items">
            </asp:DropDownList>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 7, 2020 9:58 AM
  • User-1314346660 posted

    Thank you Timur.

    Ok. I have it now. In my example there are not the same number of items in each list. So I need to amend slightly. But this works:

            <asp:DropDownList
                ID="DropDownList3"
                runat="server"
                Autopostback="true" 
                OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem Text="Fish" Value="1"></asp:ListItem>
                <asp:ListItem Text="Vegetable" Value ="2"></asp:ListItem>
                <asp:ListItem Text="Chicken" Value="3"></asp:ListItem>
            </asp:DropDownList>
            <br />
            <br />
            <asp:DropDownList
                ID="DropDownList4"
                runat="server">
                <asp:ListItem></asp:ListItem>
                <asp:ListItem>Rice</asp:ListItem>
                <asp:ListItem>Pasta</asp:ListItem>
                <asp:ListItem>Potato</asp:ListItem>
                <asp:ListItem>Noodle</asp:ListItem>
                <asp:ListItem>Bread</asp:ListItem>
            </asp:DropDownList>

    With code behind:

            protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
            {
                int x = Int32.Parse(DropDownList3.SelectedValue);
                
                DropDownList4.SelectedIndex = x;
            }

    Thanks very much for your excellent help. Please stay safe.

    Billson3000

    Tuesday, April 7, 2020 10:38 AM