如何使 Bootstrap 下拉菜单成为必需？

Posted 2023-03-05

【中文标题】如何使 Bootstrap 下拉菜单成为必需？

【英文标题】：How to make a Bootstrap dropdown required?

【发布时间】：2015-05-09 18:27:25

【问题描述】：

所以，我有以下代码，用于使用引导程序制作的下拉框：

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

现在我想让它要求你从这个下拉框中选择一些东西，然后你才能继续。我已经为文本框和单选按钮添加了 required 到标签，但是我这里没有这样的标签，那我该怎么做呢？

【问题讨论】：

您没有按照@samuelms 的建议使用select 元素，而是找到了其他解决方案吗？

【参考方案1】：

如果我们只是在 select 标签中输入 required 并在选项中输入 <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>

以上代码适用于“在提交前选择列表中的项目”等验证。

【讨论】：

我不确定您使用的是哪个 Bootstrap 版本，但如果您在“选择”中输入“必需”，然后在下拉列表中输入 None，你会得到你想要的。

【参考方案2】：

如果您想使用此代码，请使用 Bootstrap 下拉选择

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

【讨论】：

虽然此代码可以回答问题，但提供有关其解决问题的方式和原因的信息可提高其长期价值

【参考方案3】：

您能改用select element 并将 required 应用于其标签吗？

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

【讨论】：

您必须更改select 元素的样式才能获得与引导程序使用按钮和列表的方式相同的样式。这可能不是您想要做的。

如果想使用 ui.bootstrap.dropdown 然后选择，选项是不行的。可以和ui.bootstrap.dropdown一起做吗？

【参考方案4】：

在 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 中：在选择下拉菜单时设置输入字段的值。

【参考方案5】：

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

请在您的选择器中设置 required = "required"