下拉列表 使用 javascript 更改事件，当使用 EditorTemplate 时

Dropdownlist Change event with javascript, when using an EditorTemplate

本文关键字：EditorTemplate 事件 使用 javascript 下拉列表      更新时间：2023-09-26

我有一个编辑器模板 - 效果很好。在里面，我有一个下拉列表，我用一个类和 2 个div 装饰

 <div>
 @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { @class = "TypeSelector" })
 @Html.ValidationMessageFor(m => m.Type)
 </div>     
 <div class="EmailDiv">EmailStuffHere</div>
 <div class="CalendarDiv">CalendarStuffHere</div>

我试图根据下拉列表的选择显示 1 个div 中的 1

个

下拉列表填充良好，如下拉列表所示，其中包含 2 个项目"日历"和"电子邮件"

我有以下Javascript：

function checkSelection() {
    $(".EmailDiv").hide();
    $(".CalendarDiv").hide();
    var selectedItem = $(this).val();
    if (selectedItem == "Email") {
        $(".EmailDiv").show();
    } else if (selectedItem == "Calendar") {
        $(".CalendarDiv").show();
    }
};
var myobject = new checkSelection();
$(document).ready(function () {
    checkSelection();
    $(".TypeSelector").change(checkSelection);
    checkSelection.apply($(".TypeSelector"));
});

javascript文件加载（我可以在我的火狐调试器中看到它）但由于某种原因没有被击中。任何一个div 都不会显示。

我做错了什么？

将每个项目的 html 括在容器中，以便更轻松地选择相对元素

<div class="container"> // add this or similar
  <div>
    @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { @class = "TypeSelector" })
    @Html.ValidationMessageFor(m => m.Type)
  </div>     
  <div class="EmailDiv">EmailStuffHere</div>
  <div class="CalendarDiv">CalendarStuffHere</div>
</div>

和 CSS

.EmailDiv, .CalendarDiv {
  display:none;
}

然后是脚本（在主视图中）

$(document).ready(function () {
  // Set initial visibility
  $('.TypeSelector').each(function(index, item) {
    var container = $(this).closest('.container');
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
    }
});
// Update visibiity on selection
$('.TypeSelector').change(function() {
    var container = $(this).closest('.container');
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
        container.find('.EmailDiv').hide();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
        container.find('.CalendarDiv').hide();
    } else { // this may or may not be necessary
        container.find('.EmailDiv').hide();
        container.find('.CalendarDiv').hide();
    }
});
}
相关文章：