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

Question

这是我的 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 一个值。我不想使用 select 因为我会失去所有 css 样式和修改 select 相当麻烦。如果我不能使按钮（这里 span 和 id="displaytext"）显示第一个元素，我至少应该能够将它设为必填字段。

如有任何帮助，我们将不胜感激。

Answer 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>

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

How to make Bootstrap dropdown button to display the first value from dropdown menu?

model-view-controller

jquery

twitter-bootstrap

drop-down-menu