bootstrap dropdown下拉框如何从数据库取值然后动态赋值 ,目前只是单纯赋值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap dropdown下拉框如何从数据库取值然后动态赋值 ,目前只是单纯赋值相关的知识,希望对你有一定的参考价值。

<div class="container-fluid">
<button type="button" style="color:#0089d2;adding-left:0px;text-align:left;" class="btn dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">
阳台新风机
<!-- <span class="caret"></span> -->
<img src="<%=path %>/image/jt.png">
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">阳台新风机</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">办公室新风机</a>
</li>
</ul>
</div>

参考技术A 从后台异步取数据,然后,按照这个格式
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">阳台新风机</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">办公室新风机</a>
</li>
拼接上去就好本回答被提问者和网友采纳

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

【中文标题】如何使 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 并在选项中输入 &lt;option value=""&gt;None&lt;/option&gt; ,它将用于验证。我已经参考了这个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 版本,但如果您在“选择”中输入“必需”,然后在下拉列表中输入 ,你会得到你想要的。【参考方案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"

【讨论】:

以上是关于bootstrap dropdown下拉框如何从数据库取值然后动态赋值 ,目前只是单纯赋值的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap源码分析之dropdown

状态更改后的 Bootstrap Dropdown 更新位置

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

Bootstrap如何让下拉菜单dropdown-menu整体DOM向右对齐

Bootstrap 学习之js插件(下拉菜单(Dropdown)插件)

如何使用 React 制作 Bootstrap 下拉菜单