Show|Hide Div depending on show DropDownList

Question

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.

Answer 1

<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";
  }
}

Answer 2

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.

Answer 3

Could not the code be more simplified?

---

The markup

<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";
}

Answer 4

If you are using jquery then

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

Answer 5

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.