如何制作Bootstrap下拉列表？

Question

所以，我已经获得了使用bootstrap创建的下拉框的代码：

<div class="btn-group">
    <button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">France</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
     </ul>
</div>

现在我想让你需要从这个下拉框中选择一些东西才能继续。我已经为文本框和单选按钮做了这个，只需将必需的添加到标签中，但我没有这样的标签，那么我该如何做呢？

Answer 1

如果我们只在选项中添加了必需标记，并在选项中添加了<option value="">None</option>，那么它将用于验证。我已经提到了page。

选择必须在提供的值之间进行选择。

但我想知道如何编写默认情况下自定义验证消息，就像这条消息一样。

 <form action="demo_form.asp">
    <select required>
      <option value="">None</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
    </form>

以上代码适用于验证，例如＆＃34;在提交前选择列表中的项目＆＃34;。

Answer 2

您是否可以使用select element代替其标记？

<select class="form-control" required>
    <option>België/Belgique</option>
    <option>Deutschland</option>
    <option>France</option>
    <option>Nederland</option>
    <option>United Kingdom</option>
</select>

特别参见this SO question。

Answer 3

在CSS中：

.btn.btn-default.dropdown-toggle.is-invalid {
  border-color: #dc3545;
}

在HTML中：

<input type="hidden" class="form-control"  name="idType" required />
<div class="btn-group">
    <button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">France</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
     </ul>
</div>

在JavaScript中：在选择下拉菜单时设置输入字段的值。

Answer 4

<select class="form-control" required="required">
 <option>A</option>
 <option>A</option>
 <option>A</option>
</select>

请设置required =＆＃34; required＆＃34;在你的选择器

Answer 5

如果需要Bootstrap下拉菜单，请使用此代码

<select id='terms' class='form-control' required>
    <option selected disabled>Select </option>
    <option value="Y">Yes</option>
    <option value="N">No</option>
</select>