- 首页
- 前端开发
- 如何使用下拉列表更改事件在 asp.net mvc 5 中隐藏和显示 div
如何使用下拉列表更改事件在 asp.net mvc 5 中隐藏和显示 div
[英] How to hide and show div in asp.net mvc 5 using dropdownlist change event
本文介绍了如何使用下拉列表更改事件在 asp.net mvc 5 中隐藏和显示 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用下拉列表更改事件在我的 mvc 5 项目中隐藏和显示 div，我进行了研究，幸运的是我在网上找到了此代码，但它似乎对我不起作用，如果有人可以，我将不胜感激指出我犯错的地方.提前致谢.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></脚本><script type="text/javascript">$(函数(){$(document).ready(function () {$("#CountryID").change(function () {if ($(this).val() == "加纳") {$("#showStateLga").show();$("#showStateLgaText").hide();} 别的 {$("#showStateLga").hide();$("#showStateLgaText").show();}});});});
下拉列表控件:
@Html.LabelFor(model => model.CountryID, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.DropDownListFor(model => model.CountryID, (IEnumerable)ViewBag.cCountryList, "---Select---", new {@class = "form-control" })@Html.ValidationMessageFor(model => model.CountryID, "", new { @class = "text-danger" })
分区控制:
<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 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" })
渲染结果:
下拉列表:
<label class="control-label col-md-2" for="CountryID">国家:</label><div class="col-md-10"><select class="form-control" data-val="true" data-val-number="The field Country: 必须是数字."data-val-required="选择国家" id="CountryID" name="CountryID"><option value="">---选择---</option><option value="1">阿富汗</option><option value="2">加纳</option><option value="3">阿尔巴尼亚</option><option value="4">阿尔及利亚</option></选择><span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
Div1:
<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="">---选择状态---</option><option value="1">Abia State</option><option value="2">Adamawa State</option><option value="3">阿夸伊博姆州</option></选择>
<div class="form-group"><label class="control-label col-md-2" for="UserCity">城市:</label><div class="col-md-10"><select id="lga" name="lga" class="form-control" required><option value="">---选择LGA---</option></选择>
Div2:
<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="输入状态" id="notNigeriaState" name="notNigeriaState" type="text" value=""/><span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaState" data-valmsg-replace="true"></span>
<div class="form-group"><label class="control-label col-md-2" for="notNigeriaCity">城市:</label><div class="col-md-10"><input class="form-control text-box single-line" data-val="true" data-val-required="输入城市" id="notNigeriaCity" name="notNigeriaCity" type="text" value=""/><span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaCity" data-valmsg-replace="true"></span>
解决方案
我发现了问题.即 $("#CountryID") 的值是 CountryID 而不是 CountryName.
$(function () {$(document).ready(function() {$("#CountryID").change(function () {if ($(this).val() != "Ghana") {//在这里不起作用.$("#showStateLga").show();} 别的 {$("#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 中隐藏和显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
