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();
    }
});

}

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

1 个答案: