javascript - 将 razor enumdropdownlistfor 转换为 Bootstrap 按钮组下拉列表

Question

我有一个 razor 语法 enumdropdownlist 用于显示事件/非事件状态。

@Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle" })

我想使用带有像下面这样的字形的按钮组下拉列表，但不知道如何获取模型值“model.Status”来设置按钮组下拉列表的值。

$(document).ready(function() {

  $('#item1').on('click', function() {
    $('#item0').text('Active');
  });

  $('#item2').on('click', function() {
    $('#item0').text('Not Listed');
  });

});

<div class="btn-group">
  <button id="item0" type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li id="item1">
      <a href="#"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active</a>
    </li>
    <li id="item2">
      <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed</a>
    </li>
  </ul>
</div>

我不在乎我是否使用html或razor，我只想使用带字形的boostrap按钮下拉菜单，并且我希望能够在页面加载时将枚举 View 模型值设置为事件/非事件(状态) .

Answer 1

尽管 Bootstrap 下拉按钮看起来与选择列表类似，但它们的功能却截然不同。如果您需要实际发布“选定”项目，我不建议尝试使用 Bootstrap 下拉按钮来替代选择列表。

如果您只是在寻找一种比传统选择控件更具风格和视觉吸引力的替代方案，请查看类似 Select2 的内容。 ，虽然开箱即用的外观足够令人愉悦，但还有一个 project使其样式更适合 Bootstrap 的其余部分。

如果您执意要使用 Bootstrap 下拉按钮，那么您还有很多工作要做。您需要设置一些 JavaScript，用于从 select 元素读取信息并基于该信息动态创建 Boostrap 下拉按钮，同时隐藏原始选择。然后，您需要映射所有事件，例如单击下拉列表中的一项，以便它在实际选择元素中选择相同的项目。您还必须考虑突出显示下拉列表中与选择列表中所选选项相对应的项目等。如果您在编写所有代码时遇到特定问题，您可以根据需要在此处提出其他问题，但提供此处所需的所有代码远远超出了 StackOverflow 的范围。