jQuery 下拉列表，更改时执行的操作

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 然后显示其中的内容将不起作用，因为父级可能被隐藏。

编辑语法。