i know this thing is too simple but how i show div on specific ListItem ?

my code is:

<asp:DropDownList ID="dropYesNo" runat="server">
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem>
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:DropDownList>

later on i have a div:

<div id="optional">
    <p>Please Enter Your Reason</p></br>
    <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" />
    </br>
</div>

this div CSS is hidden by default. i want that when the user chooses "No" on the drop down,the div will appear. i know it's usually done with JavaScript, but i didn't understand how to do it.

thank you.

P.S.

i have another little related question, if i have a table in my SQL db lets call it users, and it has name , id columns. how do i load the entire columns to drop down so if the user chooses a name the is it's id.

i know this thing is too simple but how i show div on specific ListItem ?

my code is:

<asp:DropDownList ID="dropYesNo" runat="server">
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem>
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:DropDownList>

later on i have a div:

<div id="optional">
    <p>Please Enter Your Reason</p></br>
    <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" />
    </br>
</div>

this div CSS is hidden by default. i want that when the user chooses "No" on the drop down,the div will appear. i know it's usually done with JavaScript, but i didn't understand how to do it.

thank you.

P.S.

i have another little related question, if i have a table in my SQL db lets call it users, and it has name , id columns. how do i load the entire columns to drop down so if the user chooses a name the is it's id.

• javascript
• asp
• sql-server
• drop-down-menu

• Ask the other question as a separate one. thats how SO works... – codeandcloud Commented Feb 4, 2011 at 17:07
• for your second question check this link out: stackoverflow./questions/4242766/… – codeandcloud Commented Feb 4, 2011 at 17:09

5 Answers 5

Using JQuery the hiding and showing of the Div is pretty straight forward:

$(function() {
  $("#dropYesNo").change(function() {
    ToggleDropdown();
  });
  ToggleDropdown(); // Done to ensure correct hiding/showing on page reloads due to validation errors
});

function ToggleDropdown() {
  if ($("#dropYesNo").val() == "No") {
    $("#optional").show();
  } else {
    $("#optional").hide();
  }
}; 

The database aspect really depends on the platform you are using and would be done server side normally. You already know how to assign the Text and the Value attributes, Text = Name, Value = ID.

if (document.addEventListener) {
    document.getElementById('dropYesNo').addEventListener('change', function (e) {
        if (this.value === "0") {
            document.getElementById('optional').style.display = "block";
        } else {
            document.getElementById('optional').style.display = "none";
        }
    }, false);
} else {
    document.getElementById('dropYesNo').attachEvent('onchange', function (e) {
        if (this.value === "0") {
            document.getElementById('optional').style.display = "block";
        } else {
            document.getElementById('optional').style.display = "none";
        }
    });
}

See example here.

<asp:DropDownList ID="dropYesNo" runat="server" onchange="ToggleVisible(this);">
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem>
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:DropDownList>

function ToggleVisible(ddl)
{
  var div = document.getElementById('optional');
  var value = ddl.options[ddl.selectedIndex].value;
  if(value == 1)
  {
    div.style.display = "none";
  }
  else
  {
    div.style.display = "block";
  }
}

If you are using jquery then

function pageLoad() {
    $('#dropYesNo').change(function()
    {
       if($(this).attr('value')=='0')
         $('optional').show();
       else
         $('optional').hide();
    });
}

Could not the code be more simplified?

<asp:DropDownList ID="dropYesNo" runat="server" onchange="SetTextArea(this.value)">
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem>
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:DropDownList>

<div id="optional" style='display:none'>
        <p>Please Enter Your Reason</p></br>
        <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" ></asp:TextBox>
        </br>
</div>

The javascript

function SetTextArea(selectedValue){
    document.getElementById("optional").style.display = (selectedValue == "1")? "block" : "none";
}