asp.net mvc当Dropdownbox选项更改时显示/隐藏div [英] asp.net mvc Show/Hide div when Dropdownbox option change

问题描述

我的 Dropdownbox 列表位于 .cshtml 中，如下所示：

 < div class =form-group> 
 @ Html.Label（Role，new {@class =col-md-2 control-label}）
< div class =col-md-10> 
 @ Html.DropDownList（Name，null，new {@class =form-control}）
< / div> 
< / div> 
  

这是我的第一个和第二个 div 。

 < div class =StudentSectionstyle =display：none;> 
某些内容
< / div> 
 
< div class =LecturerSectionstyle =display：none;> 
某些内容
< / div> 
  

随我的代码一起提供给 .js

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃StudentSection）。hide（）; 
 $（＃LecturerSection）。hide（）; 
 
 $（＃Name）。change（function（）{
 if（$（＃Name）。val（）==Student）{
 $（ #StudentSection）。show（）; 
 $（#LecturerSection）。hide（）; 
} 
 else {
 $（#LecturerSection）。 ）; 
 $（＃StudentSection）。hide（）; 
} 
}）; 
}）; 
< / script> 
  

这些代码不适用于我。

解决方案

将 #StudentSection ， #LecturerSection 更改为 .StudentSection ， .LecturerSection ，因为它们似乎是类不是 ID

在演示中看到这一点

< pre-class =snippet-code-html lang-html prettyprint-override< ; script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =form-group> < div class =col-md-10> < select id =Name> <选项>学生< /选项> <选项>讲师< /选项>< /选择> < / div>< / div>< div class =StudentSectionstyle =display：none;> StudentSection一些内容< / div> < div class =LecturerSectionstyle =display：none;> LecturerSection一些内容< / div>< script type =text / javascript> $（document）.ready（function（）{$ .StudentSection）。hide（）; $（。LecturerSection）。hide（）; $（＃Name）。change（function（）{if（$（＃Name）.val（）= =Student）{$（。StudentSection）。show（）; $（.LecturerSection）。hide（）;} else {$（.LecturerSection）.show（）; $（。StudentSection ）.hide（）;}}）;}）;< / script>

I have my Dropdownbox list in .cshtml as follow:

<div class="form-group">
    @Html.Label("Role", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownList("Name", null, new { @class = "form-control" })
    </div>
</div>

Here is my first and second div.

<div class="StudentSection" style="display:none;">
Some contents
</div> 

<div class="LecturerSection" style="display:none;">
Some contents
</div>

provided with my codes in .js

<script type="text/javascript">
$(document).ready(function () {
    $("#StudentSection").hide();
    $("#LecturerSection").hide();

    $("#Name").change(function () {
        if ($("#Name").val() == "Student") {
            $("#StudentSection").show();
            $("#LecturerSection").hide();
        }
        else {
            $("#LecturerSection").show();
            $("#StudentSection").hide();
        }
    });
});
</script>

These codes doesn't works for me.

解决方案

change both #StudentSection, #LecturerSection as .StudentSection, .LecturerSection as they seem to be classes not id

see this working on the demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="col-md-10">
      <select id="Name">
    <option>Student</option>
    <option>Lecturer</option>
</select>
    </div>
</div>
<div class="StudentSection" style="display:none;">
StudentSection Some contents
</div> 

<div class="LecturerSection" style="display:none;">
LecturerSection Some contents
</div>

<script type="text/javascript">
$(document).ready(function () {
    $(".StudentSection").hide();
    $(".LecturerSection").hide();

    $("#Name").change(function () {
        if ($("#Name").val() == "Student") {
            $(".StudentSection").show();
            $(".LecturerSection").hide();
        }
        else {
            $(".LecturerSection").show();
            $(".StudentSection").hide();
        }
    });
});
</script>

这篇关于asp.net mvc当Dropdownbox选项更改时显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！