javascript - 使用 EditorTemplate 时，使用 javascript 进行 Dropdownlist Change 事件

Question

我有一个 EditorTemplate - 效果很好。在它里面，我有一个下拉列表，我用一个类和 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>

我试图根据下拉列表的选择显示 2 个 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 文件加载(我可以在我的 Firefox 调试器中看到它) 但由于某种原因没有被击中。 两个 div 都不显示。

我做错了什么？

Answer 1

将每个项目的 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();
    }
});

}