根据<div>上一个下拉框中的选择显示/隐藏标签

Question

我也读了很多关于堆栈溢出的教程和答案，但它仍然不适用于我。从下拉列表中选择选项(是)后->它应该显示CCD_ 1标签，否则CCD_。

以下是我的代码：

<h4>1. Does your school participate in the sponsored CAT4 scoring initiative?</h4>
@{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "Yes",
Value = "True"
});
listItems.Add(new SelectListItem
{
Text = "No",
Value = "False"
});
}
<div class="form-group" id="PickOption">
<div class="col-md-10">
@Html.DropDownListFor(model => model.ParticipateInCAT4Scoring, listItems, "<----Select Yes or No---->", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.ParticipateInCAT4Scoring, "", new { @class = "text-danger" })
</div>
</div>
<div id="OnYes" class="form-group" style="display:none">
@Html.Label("For what Grade levels?", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(m => m.GradeLevelsCAT4, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(m => m.GradeLevelsCAT4, "", new { @class = "text-danger" })
</div>
</div>

下面是我放在查看页面底部的脚本文件：

@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$('#PickOption').on('change', function () {
if ($(this).val() == 'True') {
document.getElementById('OnYes').style.display = "";

}
else {

document.getElementById('OnYes').style.display = "none";

}
});
});
</script>
}

Answer 1

您的选择器不对，请确保您在下拉菜单上绑定了事件，以便在下拉菜单上添加一个类

@Html.DropDownListFor(model => model.ParticipateInCAT4Scoring, listItems, "<----Select Yes or No---->", new { @class = "form-control pickerDropdown" })

现在将事件绑定到添加的类上，如下所示：

$('.pickerDropdown').on('change', function () {

Answer 2

PickOption是包装分区的ID。

将此行上的#PickOption替换为选择框的ID或选择器(通常是自动生成的，但您可以指定.

$('#PickOption').on('change', function () {

此外，由于您使用的是jQuery，您可以只执行$('#OnYes').show();

https://api.jquery.com/show/