Question

我使用bootstrap并有一些选择/下拉框。他们不允许我编辑文本，我希望将此选择列表设为可编辑字段，以便它可以作为现有选择或键入新值，然后单击保存以保存它。我怎么能通过bootstrap这样做（因为我的整个站点是用bootstrap制作的）。

所以我今天所拥有的只是下面的选择，但它不允许用户输入选择框。我想我正在寻找混合文本框并选择/下拉。

<select id="selectGroups" class="form-control" size="1">
   @foreach(var g in Model)
   {
      <option value="@g">@g</option>
   }
</select>

Answer 1

这看起来像是解决了我的问题。

Why does HTML 5 not have editable combobox or local menus built in?

我只是将所述输入控件的类设置为“form-control”，然后我得到了bootstrap外观。

Answer 2

查看Select2小部件：http://ivaynberg.github.io/select2/

它允许文本编辑，你也可以查看它的引导主题：https://fk.github.io/select2-bootstrap-css/

Answer 3

旧的，但我在遇到相同问题时发现了这一点。我的解决方案-使用下拉菜单并将按钮替换为文本输入

<div>
  <input type="text" placeholder="" class="form-control dropdown-toggle" id="myInputId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" />
  <div class="dropdown-menu" aria-labelledby="myInputId">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Bootstrap选择允许文本编辑

3 个答案: