如何在asp.net mvc 5中使用dropdownlist更改事件来隐藏和显示div [英] How to hide and show div in asp.net mvc 5 using dropdownlist change event

问题描述

我试图在我的mvc 5项目中使用dropdownlist更改事件隐藏和显示div，我已经研究过了，幸运的是，我在网上发现了这个代码，但它似乎对我没有任何作用，如果有人愿意，我会很感激指出我犯错的地方。
提前致谢

 < script type =text / javascriptsrc =http：// ajax .googleapis.com / AJAX /库/ jquery的/ 1.8.3 / jquery.min.js>< /脚本> 
< script type =text / javascript> 
 $（function（）{
 $（document）.ready（function（）{
 $（＃CountryID）。change（function（）{
 if（$ （this）.val（）==Ghana）{
 $（＃showStateLga）。show（）; 
 $（＃showStateLgaText）。hide（）; 
 } else {
 $（＃showStateLga）。hide（）; 
 $（＃showStateLgaText）。show（）; 
} 
}）; 
}）; 
}）; 
< / script> 
  

Dropdownlist控制：

 < div class =form-group> 
 @ Html.LabelFor（model => model.CountryID，htmlAttributes：new {@class =control-label col-md-2}）
< div class =col-md- 10\" > 
 @ Html.DropDownListFor（model => model.CountryID，（IEnumerable< SelectListItem>）ViewBag.cCountryList，--- Select ---，new {@class =form-control}）
 @ Html.ValidationMessageFor（model => model.CountryID，，new {@class =text-danger}）
< / div> 
< / div> 
  

Div Control：

 < div id =showStateLgastyle =display：none> 
< div class =form-group> 
 @ Html.LabelFor（model => model.notState，htmlAttributes：new {@class =control-label col-md-2}）
< div class =col-md- 10\" > 
 @ Html.EditorFor（model => model.notState，new {htmlAttributes = new {@class =form-control}}）
 @ Html.ValidationMessageFor（model => model.notState ，，新{@class =text-danger}）
< / div> 
< / div> 
< div class =form-group> 
 @ Html.LabelFor（model => model.notCity，htmlAttributes：new {@class =control-label col-md-2}）
< div class =col-md- 10\" > 
 @ Html.EditorFor（model => model.notCity，new {htmlAttributes = new {@class =form-control}}）
 @ Html.ValidationMessageFor（model => model.notCity ，，新{@class =text-danger}）
< / div> 
< / div> 
< / div> b 
 
 
 $ b 
渲染结果： / p> 
 
 
 < div class =form-group> 
< label class =control-label col-md-2for =CountryID>国家：< / label> 
< div class =col-md-10> 
 < option value =1>阿富汗< / option> 
< option value =2>加纳< / option> 
< option value =3>阿尔巴尼亚< / option> 
< option value =4>阿尔及利亚< / option> 
< / select> 
 < / div> 
< / div> 
  
 Div1：
 < div id =showStateLgastyle =display：block> 
 
< div class =form-group> 
< label class =control-label col-md-2for =UserStateList>状态：< / label> 
< div class =col-md-10> 
< select class =form-controlid =Statename =State>< option value => ---选择状态---< / option> 
< option value =1> Abia State< / option> 
< option value =2>阿达玛瓦州< / option> 
< option value =3>阿夸伊博姆州< / option> 
 
< / select> 
< / div> 
< / div> 
< div class =form-group> 
< label class =control-label col-md-2for =UserCity>城市：< / label> 
< div class =col-md-10> 
< select id =lganame =lgaclass =form-controlrequired> 
< option value => ---选择LGA ---< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
  
 Div2：
 < div id =showStateLgaTextstyle =display：none> 
< div class =form-group> 
< label class =control-label col-md-2for =notNigeriaState>状态：< / label> 
< div class =col-md-10> 
< input class =form-control text-box single-linedata-val =truedata-val-required =Enter stateid =notNigeriaStatename =notNigeriaStatetype = textvalue =/> 
 < / div> 
< / div> 
< div class =form-group> 
< label class =control-label col-md-2for =notNigeriaCity>城市：< / label> 
< div class =col-md-10> 
< input class =form-control text-box single-linedata-val =truedata-val-required =输入城市id =notNigeriaCityname =notNigeriaCitytype = textvalue =/> 
 < / div> 
< / div> 
< / div> 
  
 
 
解决方案
我发现了这个问题。这是$（＃CountryID）的值是 CountryID 而不是 CountryName 。 
 
 
  $（function（）{
 $（document）.ready（function（）{
 $（＃CountryID）。change（function（）{
 if （$（this）.val（）！=Ghana）{//它在这里不工作
 $（＃showStateLga）。show（）; 
} else {
 $（＃showStateLga）。hide（）; 
} 
}）; 
}）; 
}）; 
  
有两种方法可以修复它。首先 
 
 
  if（$（this）.val（）！=2）{//将匹配文本替换为CountryID 。 
  
或 
 
 
  if（$（this）.find（'：selected'）。text（）！=Ghana）{//将.val（）替换为.find（'：selected'）.text（）。 
  
 
I am trying to hide and show div in my mvc 5 project using dropdownlist change event, i have researched, and luckily i found this code online, but it doesn't seem to work for me, i will appreciate if anyone could point at where i am making mistakes.
Thanks in advance.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            $("#CountryID").change(function () {
                if ($(this).val() == "Ghana") {
                    $("#showStateLga").show();
                    $("#showStateLgaText").hide();
                } else {
                    $("#showStateLga").hide();
                    $("#showStateLgaText").show();
                } 
            });
        });
    });
</script>
Dropdownlist control:
<div class="form-group">
                @Html.LabelFor(model => model.CountryID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.CountryID, (IEnumerable<SelectListItem>)ViewBag.cCountryList, "---Select---", new {@class = "form-control" })
                    @Html.ValidationMessageFor(model => model.CountryID, "", new { @class = "text-danger" })
                </div>
            </div>
Div Control:
 <div id="showStateLga" style="display: none">
                <div class="form-group">
                    @Html.LabelFor(model => model.notState, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.notState, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.notState, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.notCity, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.notCity, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.notCity, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
Rendering Results:


Dropdownlist:
    <div class="form-group">
                    <label class="control-label col-md-2" for="CountryID">Country:</label>
                    <div class="col-md-10">
                        <select class="form-control" data-val="true" data-val-number="The field Country: must be a number." data-val-required="Select country" id="CountryID" name="CountryID"><option value="">---Select---</option>
                   <option value="1">Afghanistan</option>
                   <option value="2">Ghana</option>
                   <option value="3">Albania</option>
                   <option value="4">Algeria</option>
                       </select>
                        <span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
                    </div>
                </div>
Div1:
    <div id="showStateLga" style="display:block">

                    <div class="form-group">
                        <label class="control-label col-md-2" for="UserStateList">State:</label>
                        <div class="col-md-10">
                            <select class="form-control" id="State" name="State"><option value="">---Select State---</option>
                          <option value="1">Abia State</option>
                         <option value="2">Adamawa State</option>
                          <option value="3">Akwa Ibom State</option>

                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2"              for="UserCity">City:</label>
                        <div class="col-md-10">
                            <select id="lga" name="lga" class="form-control"    required>
                                <option value="">---Select LGA---</option>
                            </select>
                        </div>
                    </div>
                    </div>
Div2:
<div id="showStateLgaText" style="display:none">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="notNigeriaState">State:</label>
                        <div class="col-md-10">
                            <input class="form-control text-box single-line" data-val="true" data-val-required="Enter state" id="notNigeriaState" name="notNigeriaState" type="text" value="" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaState" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2" for="notNigeriaCity">City:</label>
                        <div class="col-md-10">
                            <input class="form-control text-box single-line" data-val="true" data-val-required="Enter city" id="notNigeriaCity" name="notNigeriaCity" type="text" value="" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaCity" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </div>

解决方案
I found the problem. That is the value of $("#CountryID") is CountryID instead of CountryName.
$(function () {
    $(document).ready(function() {
        $("#CountryID").change(function () {
            if ($(this).val() != "Ghana") { // It doesn't work over here.
                $("#showStateLga").show();
            } else {
                $("#showStateLga").hide();
            }
        });
    });
});
There are 2 ways to fix it. First
if ($(this).val() != "2") { // Replace the match text to CountryID.
Or
if ($(this).find(':selected').text() != "Ghana") { // Replace .val() to .find(':selected').text().


                        
这篇关于如何在asp.net mvc 5中使用dropdownlist更改事件来隐藏和显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.