showing / hiding Divs

Question

I have asp dropdownlist populated from database and two divs. I want when I select any item of the dropdownlist to hide existing div and show another one if i select the first item the opposite . here is my code:

<asp:DropDownList runat="server" 
                    ID="brandsList" 
                    AutoPostBack="True" 
                    DataSourceID="brandsDataSource" 
                    DataTextField="BrandName" 
                    DataValueField="BrandId" 
                    OnDataBound="brandsList_DataBound" 
                    OnSelectedIndexChanged="brandsList_SelectedIndexChanged" 
                    ClientIDMode="Static">
</asp:DropDownList>

C# code for my dropdownlist:

if (brandsList.Items.Count > 0)
        {
            brandsList.Items.Insert(0, " * SELECT BRAND *");
            brandsList.Items[0].Value = "1";
            brandsList.SelectedIndex = 0;
        }

javascript code:

<script type="text/javascript">
        $(function () {
            $("<%=brandsList.ClientID%>").change(function () {
                ToggleDropdown();
            });
            ToggleDropdown();
        });
        function ToggleDropdown(){
            if ($("<%=brandsList.ClientID %>").val() != "1") {
                $("#cats").hide(); $("items").show();
            }
            else { $("#cats").show();$("#items").hide(); }
        };
    </script>

P.S : I want to show the both divs in the same place

thx in advance!

Sam

@PSL I believe you are right :) the problem is this code is not working! — Sam, Dec 12 '13 at 16:59
on a side note, you don't have to use `$("<%=brandsList.ClientID %>"`, since you're using `ClientIDMode=Static`. Just use `$('#brandsList')`. [More info](http://stackoverflow.com/a/20227176/489512) — Venkata Krishna, Dec 12 '13 at 16:59
@PSL thx for your notice, I fixed #items and still the same prob. — Sam, Dec 12 '13 at 17:16
Samira, added more to my answer for JavaScript solution. if you need the postback, it won't work with it though. — Jmoreland91, Dec 13 '13 at 20:17

Jmoreland91 · Accepted Answer · 2013-12-13T20:16:18.307

Since you are using postback, set the div to runat='server' set up conditions to show or hide the div or in the onSelectedIndexChanged event. Granted, may not be the best way, it worked for me in a previous project.

cats.Attributes["style"] = "display: block;";
items.Attributes["style"] = "display: none;";

EDIT:

I did some screwing around earlier, it's not jquery but it is JavaScript.

First you will need to add something to your page load event, and also take off the AutoPostBack='true' so disregard this if you are relying on postbacks :(

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ddlTest.Attributes.Add("onchange", "test();");
        }
    }

Here is my dropdownlist and divs:

<asp:DropDownList runat="server" ID="ddlTest">
 <asp:ListItem>default</asp:ListItem>
 <asp:ListItem Value="1">20</asp:ListItem>
 <asp:ListItem Value="2">55</asp:ListItem>
 </asp:DropDownList>
<div id="items">
<p>
    This is Div items
</p>
</div>
<div id="cats">
<p>
    This is Div Cats
</p>
</div>

And here is the JavaScript

<script type="text/javascript">

    function ShowOrHideDiv(id) {
        switch(id)
        {
            case "1":
                DisplayDiv("cats");
                HideDiv("items");
                break;
            case "2":
                DisplayDiv("items");
                HideDiv("cats");
                break;
            default:
                DisplayDiv("items");
                DisplayDiv("cats");
        }

    }

    function DisplayDiv(ctrl) {
        var div = document.getElementById(ctrl);

        div.style.display = 'block';
    }

    function HideDiv(ctrl) {
        var div = document.getElementById(ctrl);

        div.style.display = 'none';
    }

    function test(){
    var testDDL = document.getElementById('<%=ddlTest.ClientID%>');
    var value = testDDL.options[testDDL.selectedIndex].value;

    ShowOrHideDiv(value);
    }

</script>

thank you Jmoreland91 for your solution not exactly what I needed but it works fine :) but I will keep trying with Javascript, I think I'm almost there :D sorry vote up requires 15 reputation :( — Sam, Dec 12 '13 at 17:33
You're welcome, no worries, I wish I had the solution for you in JavaScript, but I wrote this cause I believe I had the same issue you did. — Jmoreland91, Dec 12 '13 at 19:01
thx for your answer, I really prefer Javascript. I will try it, maybe later on Monday :D Have awesome weekend! Sam — Sam, Dec 13 '13 at 20:31

score 2 · Answer 2 · answered Dec 12 '13 at 16:59

2

Your code seems alright except one place where you did not give # in id selector.

Change

$("#cats").hide(); $("items").show();

To

$("#cats").hide(); $("#items").show();

answered Dec 12 '13 at 16:59

Adil

146,340
25
209
204

thank you so much, but I'm trying to fix the problem and still. Last thing I tried i added JQuery to my page again (I have it already in the master page) and when I added the jquery file div disappears in page load and not showing when click the dropdownlist!! – Sam Dec 12 '13 at 17:14
Can you show us the generated html for dropdownlist – Adil Dec 12 '13 at 17:16

showing / hiding Divs

2 Answers2