Question

我有一个包含两个值的下拉列表：Sponsor和Social_Worker。我想要做的就是，当选择其中一个时，它会显示一个div并隐藏另一个div，反之亦然，如果另一个被选中。我设法用按钮执行此操作，但无法使用下拉列表找到正确的命令，我找到的唯一信息是获取所选值。

按钮jquery（这是有效的）：

<script type="text/javascript">
$(document).ready(function () {
    var det = $("#SponsorDetails");
    var all = $("#AllDetails");
    $(all).hide();
    $(det).hide();

    $("#Social_WorkerButton").click(function (e) {
        e.preventDefault();
        $("#AllDetails").show("slow");
        $("#SocialWorkerSubmit").show("slow");
        $("#SponsorDetails").hide("slow");
    });
    $("#SponsorButton").click(function (e) {
        e.preventDefault();
        $("#AllDetails").show("slow");
        $("#SponsorDetails").show("slow");
        $("#SponsorSubmit").show("slow");
    });
});

我尝试使用：

$("#SelectAccount").change(function (e) {
        e.preventDefault();
        $("#SponsorDetails").show("slow");
        $("#SponsorSubmit").show("slow");
    });

DropDownList的HTML：

<asp:DropDownList ID="SelectAccount" runat="server">
        <asp:ListItem>Sponsor</asp:ListItem>
        <asp:ListItem Value="Social_Worker">Social Worker</asp:ListItem>
    </asp:DropDownList>

只是看看对下拉列表的任何更改是否有效，但这似乎不起作用。

Answer 1

为什么在下拉列表中使用preventDefault（）？它无论如何都不会做任何事情，甚至可能会抑制你正在寻找的信息。

尝试

$("#SelectAccount").change(function() {
  //hide social worker and sponsor stuff
  val = $(this).val();
  if (val == 'Social_Worker') {
    //show social worker stuff
  } else {
    //show sponsor stuff
  }
 });

顺便说一句，根据html的设置方式，隐藏#Alldetails然后在其中显示内容将无效，因为父级可能会被隐藏。

编辑语法。

Answer 2

如果你有这个简单的下拉形式

，那么

<script type="text/javascript">
 $(document).ready(function() {
 $('select[id$=<%=DropDownList1.ClientID%>]').bind("keyup
 change", function() {
 //do every thing you want
 });
 });
</script>

jQuery下拉列表，在更改时

2 个答案: