显示|隐藏 Div 取决于显示 DropDownList

Question

我知道这件事太简单了，但是我如何在特定的 ListItem 上显示 div ？

我的代码是：

<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>

稍后我有一个div：

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

这个div CSS默认是隐藏的。 我希望当用户在下拉菜单中选择“否”时，div 将出现。 我知道这通常是用 JavaScript 完成的，但我不明白该怎么做。

谢谢。

PS

我还有另一个相关的小问题， 如果我的 SQL 数据库中有一个表，我们可以将其称为用户，并且它有 name 和 id 列。 我如何加载整个列以下拉，这样如果用户选择一个名称，它就是它的 ID。

Answer 1

使用 JQuery 隐藏和显示 Div 非常简单：

$(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();
  }
}; 

数据库方面实际上取决于您正在使用的平台，并且通常在服务器端完成。您已经知道如何分配文本和值属性，文本 = 名称，值 = ID。

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

请参阅此处的示例。

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

Answer 4

如果你使用jquery那么

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

Answer 5

代码就不能再简化一点吗？

---

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>

JavaScript

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