如何使 Bootstrap 下拉按钮显示下拉菜单中的第一个值？答案

【问题标题】：How to make Bootstrap dropdown button to display the first value from dropdown menu?如何使 Bootstrap 下拉按钮显示下拉菜单中的第一个值？
【发布时间】：2015-07-06 19:47:13
【问题描述】：

这是我的 HTML：

<div class="form-group">
 <label for="Environment">Environment</label>
   <div class="dropdown">
     <button class="dropdown-toggle form-control btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        @Html.HiddenFor(m => m.Environment)
        <span id="displaytext"> @Model.GetEnvironments().First()</span>
        <span class="glyphicon glyphicon-menu-down pull-right"></span>
     </button>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          @foreach (string product in Model.GetEnvironments())
          {
            <li role="presentation"><a role="menuitem" tabindex="-1">@product</a></li>
          }
     </ul>
   </div>
</div>

这是一个非常低效的代码，因为我调用了两次GetEnvironments()。

基本上我希望用户在提交表单之前强制选择一个值。我不想使用 select，因为我会丢失所有的 CSS 样式，并且修改 select 非常麻烦。如果我无法使按钮（此处为span 和id="displaytext"）显示第一个元素，我应该至少可以将其设为必填字段。

任何帮助将不胜感激。

【问题讨论】：

标签： jquery twitter-bootstrap model-view-controller drop-down-menu

【解决方案1】：

您可以调用GetEnvironments，只需将第一次调用存储在变量中即可，这样会更有效。

@{ 
    var environments = @Model.GetEnvironments(); // store data
}
<div class="form-group">
 <label for="Environment">Environment</label>
   <div class="dropdown">
     <button class="dropdown-toggle form-control btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        @Html.HiddenFor(m => m.Environment)
        <span id="displaytext"> @environments.First()</span>
        <span class="glyphicon glyphicon-menu-down pull-right"></span>
     </button>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          @foreach (string product in environments)
          {
            <li role="presentation"><a role="menuitem" tabindex="-1">@product</a></li>
          }
     </ul>
   </div>
</div>

【讨论】：