时间戳

首页 > 解决方案 > 根据使用 javascript 在 Asp.net 中的下拉选定值显示和隐藏 div 不起作用

javascript - 根据使用 javascript 在 Asp.net 中的下拉选定值显示和隐藏 div 不起作用

问题描述

我有三个隐藏的 div 我必须根据下拉菜单的选择显示它们但它不起作用我在做什么错了？

我的下拉菜单

<asp:DropDownList ID="ddlPermissionMode" runat="server" Width="100%" Height="25px">
     <asp:ListItem>choose</asp:ListItem>
     <asp:ListItem>Individual</asp:ListItem>
     <asp:ListItem>Group</asp:ListItem>
</asp:DropDownList>

我的 div

 <div class="choose box row text-center">
      Select A permission Mode if you want to give This user a  <strong>permission</strong>
  </div>
 <div class="Individual row box">
                           l
 </div>
  <div class="Group row box">
       You have selected <strong>blue option</strong> so i am here
 </div>

脚本

<%-- <script>
        $(document).ready(function(){
      $("#ddlPermissionMode").change(function(){
        $(this).find("option:selectedValue").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
    </script>

风格

<style>
        .box{
        color: #fff;
        display: none;
        margin-top: 20px;
    }
     .choose{ background: #ff0000; }
     .Individual{ background: #228B22; }
     .Group{ background: #0000ff; }
    </style>--%>

标签： javascriptasp.net

解决方案

您需要更改$(this).find("option:selectedValue")为$(this).find("option:selected")

一切似乎都很好，只需像这样更改您的脚本

<%-- <script>
        $(document).ready(function(){
      $("#ddlPermissionMode").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
    </script>

推荐阅读