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完成，但我不明白该怎么做。

谢谢。

P.S。

我还有一个相关的问题，如果我在我的SQL数据库中有一个表，我可以称之为用户，它有名称，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();
  }
};

数据库方面实际上取决于您正在使用的平台，并且通常会在服务器端完成。您已经知道如何分配Text和Value属性，Text = Name，Value = 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";
        }
    });
}

See example here.

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

代码不能更简化吗？

<小时/> 标记

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

显示|隐藏Div取决于show DropDownList

5 个答案: