时间戳

首页 > 解决方案 > 下拉列表未在选择更改时更新

model-view-controller - 下拉列表未在选择更改时更新

问题描述

PFB 我的代码。我在 asp.net mvc 中使用引导程序设计了一个下拉列表。列表的内容是静态的和硬编码的。在下拉列表中更改选择时，不会更新最新项目。我附上了我的代码以及问题的屏幕截图。在下拉列表中，即使我选择已分配，状态列表也不会更新。 状态字段未更改为已分配或进行中<div class="dropdown"> <button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Status <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownStatus"> <li><a href="#">Assigned</a></li> <li><a href="#">In Progress</a></li> <li><a href="#">Resolved</a></li> </ul> </div>

标签： model-view-controllerdropdown

解决方案

如果您使用引导下拉菜单，则必须使用 Javascript 来更新模型。只需在页面上保留一个隐藏的 for，然后将处理程序附加到下拉列表的更改。

需要注意的一件事是 Bootstrap 下拉菜单不会触发更改事件。您必须将处理程序附加到各个项目。像这样的东西：

$('.dropdown-menu a').click(function(e) {
    
    // set the hidden field to the new value
    var newValue = $(this).text();
    $('#foo').val(newValue);
    
});
@Html.HiddenFor(m => m.myProperty, new {id = "foo"})

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Status
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownStatus">
            <li><a href="#">Assigned</a></li>
            <li><a href="#">In Progress</a></li>
            <li><a href="#">Resolved</a></li>
        </ul>
    </div>

当然，如果你真的不需要 Bootstrap 下拉菜单，也许只需要它看起来像它，你可以很容易地做到这一点，只需使用常规的 HTML 下拉菜单并将其设置为 bootstrap 下拉菜单：

@Html.DropDownListFor(m => m.myProperty, new {@class = "form-control"})

form-control 是一个引导 css 类，使您的输入控件更像引导程序。虽然它并不完全相同（尽管我更喜欢它），所以选择取决于你。

推荐阅读