我在模态组件中添加显示和隐藏，但它不起作用
Posted
技术标签:
【中文标题】我在模态组件中添加显示和隐藏，但它不起作用【英文标题】：i add show and hide in modal component and it doesn't work 【发布时间】：2021-08-28 08:51:05 【问题描述】：我正在使用 Asp.NetCore、C#、Ajax javascript 和 jquery。我在我的应用程序中创建了一个模型组件。 显示模型组件，但未显示隐藏元素。当我在 Axe 选项中选择我的选项时，它不会显示任何一个 GRaison / DRaison / PRaison / CRaison。我用“显示”尝试它，即使我设置了选项也不起作用：选中并且也不起作用。我不知道让这段代码工作 这是页面：
@model Segment
<div class="modal fade" id="addSegment">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-uppercase text-white" style="height:5%;">
<h5 class="modal-title" id="addSegmentLabel">Create Segment</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span>x</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label asp-for="SName" class="control-label">Name : </label>
<div class="col-md-12">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="SName" class="form-control" placeholder="Enter segment name" />
<span asp-validation-for="SName" class="text-danger"></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group ">
<label asp-for="SRang" class="control-label">Rang</label>
<input asp-for="SRang" class="form-control" />
<span asp-validation-for="SRang" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="SType" class="control-label">Type</label>
<select asp-for="SType" class="form-control" id="SType">
<option selected disabled>Selectionnez type..</option>
<option id="Compte">Compte</option>
<option id="Contact">Contact</option>
</select>
<span asp-validation-for="SType" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group ">
<label asp-for="Description" class="control-label"></label>
<textarea class="form-control" rows="3"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label asp-for="Axe" class="control-label"></label>
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="html.GetEnumSelectList<Axe>()">
<option value="null" selected>Selectionnez Axe..</option>
</select>
<span asp-validation-for="Axe" class="text-danger"></span>
</div>
<div class="form-group" id="g" hidden>
<label asp-for="GRaison" class="control-label">Raison</label>
<select asp-for="GRaison" class="form-control">
<option> Personalité </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="GRaison" class="text-danger"></span>
</div>
<div class="form-group" id="d" hidden>
<label asp-for="DRaison" class="control-label">Raison</label>
<select asp-for="DRaison" class="form-control">
<option> Age </option>
<option> Sexe</option>
<option> Education</option>
<option> Revenu</option>
</select>
<span asp-validation-for="DRaison" class="text-danger"></span>
</div>
<div class="form-group" id="p" hidden>
<label asp-for="PRaison" class="control-label">Raison</label>
<select asp-for="PRaison" class="form-control">
<option> Personalité, </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="PRaison" class="text-danger"></span>
</div>
<div class="form-group" id="c" hidden>
<label asp-for="CRaison" class="control-label">Raison</label>
<select asp-for="CRaison" class="form-control">
<option> Pays</option>
<option> Ville</option>
<option> Language</option>
<option> Population</option>
</select>
<span asp-validation-for="CRaison" class="text-danger"></span>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section Scripts
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(function ()
$("#SType").change('pageload', function ()
if ($(this).val() == "Contact")
$(function ()
$("#Axe").change('pageload', function ()
if ($(this).val() == 0)
$("#g").removeAttr('hidden');
$("#p,#c,#d").hide();
else if ($(this).val() == 1)
$("#p").removeAttr('hidden');
$("#g,#c,#d").hide();
else if ($(this).val() == 2)
$("#c").removeAttr('hidden');
$("#p,#g,#d").hide();
else
$("#d").removeAttr('hidden');
$("#p,#c,#g").hide();
);
);
else
$("#g,#p,#c,#d").hide();
);
);
</script>
【问题讨论】：
嗨@manelsayari，关于这个案例的任何更新？如果答案可以帮助解决您的问题，请接受 - 请参阅What should I do when someone answers my question? 【参考方案1】：当我在 Ax 选项中选择我的选项时，它不会显示 GRaison / DRaison / PRaison / CRaison 中的任何一个。我用“显示”尝试它，即使我设置了选项也不起作用：选中，也不起作用。
首先，我们可以发现您在下面的代码中为select 设置了id="Axeya ij"，这将导致您无法使用$("#Axe") 获取该元素。
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
其次，如果您在运行.hide() 方法后检查隐藏元素的源代码，您会发现它有助于为元素添加style="display: none;" 内联样式，它不会添加hidden 属性.
要解决问题并满足您的要求，您可以尝试修改如下代码。
$(function ()
$("#SType").change('pageload', function ()
if ($(this).val() == "Contact")
$("select[name='Axe']").change('pageload',function ()
if ($(this).val() == 0)
$("#g").removeAttr('hidden');
$("#g").show();
$("#p,#c,#d").hide();
else if ($(this).val() == 1)
$("#p").removeAttr('hidden');
$("#p").show();
$("#g,#c,#d").hide();
else if ($(this).val() == 2)
$("#c").removeAttr('hidden');
$("#c").show();
$("#p,#g,#d").hide();
else
$("#d").removeAttr('hidden');
$("#d").show();
$("#p,#c,#g").hide();
);
else
$("#g,#p,#c,#d").hide();
);
);
【讨论】：
以上是关于我在模态组件中添加显示和隐藏，但它不起作用的主要内容，如果未能解决你的问题，请参考以下文章
我想在 recyclerview 中显示编辑文本数据，但它不起作用
Eclipse 语法高亮显示：尝试为新文件扩展名指定它，但它不起作用
使用Tkinter我试图添加用户输入的值并将其添加到文件中存在的值，但它不起作用