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()。

基本上我希望用户在提交表单之前强制选择一个值。我不想使用选择，因为我会失去所有的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下拉按钮显示下拉菜单中的第一个值？

1 个答案: