Hollow Looi
Hollow Looi

Reputation: 57

Using Multiple DropDownList To Identity Which Image to Show

<asp:DropDownList ID="Type" runat="server" OnSelectedIndexChanged="Type_SelectedIndexChanged" AutoPostback="True">
    <asp:ListItem Text="-Select Type-" value=""/>
    <asp:ListItem Text="Apple" value="apple" />
    <asp:ListItem Text="Orange" value="orange" />
</asp:DropDownList>

protected void Type_SelectedIndexChanged(object sender, EventArgs e)
    {
        string a = Type.SelectedItem.Value;
        switch (a)
        {
            case "apple":
                image1.ImageUrl = "~/image/apple.jpg";
                break;
            case "orange":
                image1.ImageUrl = "~/image/orange.jpg";
                break;
        }
    }

This code allow the user select either orange/apple and image shown in the page will change accordingly. But what if I need to have multiple dropdownlist to identity which image to be shown. For example, I add another Dropdownlist which allow user to choose the size of the type of fruit. If user select apple at Type dropdownlist and Big at Size dropdownlist, the "Big Apple" image will be selected to shown in image div.

Any help will be appreciated.

Upvotes: 1

Views: 47

Answers (1)

Baber Ali Siddique
Baber Ali Siddique

Reputation: 409

Let say your second DropDownList is Size and its SelectedIndexChanged method will be as following:

protected void Size_SelectedIndexChanged(object sender, EventArgs e)
    {
        string image = "";
        switch (Type.SelectedItem.Value)
        {
            case "apple":
                image = "~/image/apple.jpg";
                break;
            case "orange":
                image = "~/image/orange.jpg";
                break;
        }

        switch (Size.SelectedItem.Value)
        {
            case "small":
                image1.ImageUrl = image;
                image1.Width = 200;
                image1.Height = 200;
                break;
            case "big":
                image1.ImageUrl = image;
                image1.Width = 400;
                image1.Height = 400;
                break;
        }
    }

and no need to do any code in Type_SelectedIndexChanged

Update:

If you already have different images of different sizes then you can handle it this way:

protected void Size_SelectedIndexChanged(object sender, EventArgs e)
    {
        string image = "";
        switch (Type.SelectedItem.Value)
        {
            case "apple":
                switch (Size.SelectedItem.Value)
                {
                    case "small":
                        image1.ImageUrl = "~/image/small-apple.jpg";
                        break;
                    case "big":
                        image1.ImageUrl = "~/image/big-apple.jpg";
                        break;
                }
                break;
            case "orange":
                switch (Size.SelectedItem.Value)
                {
                    case "small":
                        image1.ImageUrl = "~/image/small-orange.jpg";
                        break;
                    case "big":
                        image1.ImageUrl = "~/image/big-orange.jpg";
                        break;
                }
                break;
        }            
    }

Upvotes: 1

Related Questions