Show|Hide Div depending on show DropDownList

问题:

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.

回答1:

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.

回答2:

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.

回答3:

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

回答4:

If you are using jquery then

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

回答5:

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