如何将 Bootstrap 下拉菜单用作 HTML 表单 <select>

Posted 2023-05-08

【中文标题】如何将 Bootstrap 下拉菜单用作 HTML 表单 <select>

【英文标题】：How to use Bootstrap dropdown as an HTML form <select>

【发布时间】：2016-02-17 00:13:58

【问题描述】：

我想我可能很密集。我想使用 Bootstrap 下拉按钮从名称列表中进行选择。我可以在纯 html 和/或非常简单的 jQuery 中做到这一点吗？

IE 我想使用 Bootstrap 下拉菜单作为 HTML 表单 select 输入。

<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
    <li><a id="yy-muiThreet">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

    <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>

我将表单放在一起看起来不错（易于使用等），然后开始清理以使其正常工作。基本的 BS“选择”相当难看，所以如果可以的话，我宁愿使用下拉列表。其他一切都很好，但我不知道如何使用下拉菜单作为选择。

编辑：感谢 Cory 和以前的 SO 海报，这对我有用，我认为可能对其他人有帮助

<script>
$(".dropdown-menu a").click(function()
var selectId = $(this).attr('id')
    $('#formId').submit(function(eventObj) 
        $(this).append("<input type='hidden' name='selectClient' value="+selectId+"/> ");
        return true;
    );
)
</script>

如果您希望文本不是 id，则在第三行使用：

var sel = $(this).text()

编辑： Adarsh 下面的贡献是题外话，但精彩。我试图传递值，但 Adarsh 的解决方案将所选用户的名称添加到提供基本用户反馈的按钮中。所以你最终得到：

感谢提供完美解决方案的人。

【参考方案1】：

你在寻找这样的东西吗？ http://jsfiddle.net/rszens8z/1/

  <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button"      id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true">
     Dropdown
     <span class="caret"></span>
  </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
     <li><a id="yy-muiThreet">Mui Threet</a></li>
     <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

     <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
     <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>
   </ul>
 </div>

你可以用一些内置的 BS CSS http://getbootstrap.com/components/#btn-dropdowns改变它的外观

【讨论】：

抱歉，我正在尝试将下拉菜单转换为表单选择。这似乎是另一个版本的下拉菜单。谢谢，但我并不担心我试图将表单功能附加到它的外观！除非我没有抓住重点。

您想像表单一样提交来自 DD 的选择吗？他们选择后您希望发生什么？

Cory 是的，我希望它表现得像 <form><select><option> etc

好的，我更新了小提琴的链接。您可以监听下拉选择的点击，然后您可以对所做的选择做任何您想做的事情。

科里 - 第一 - 太棒了。没想到我可以将信息输入表格然后 - 瞧！ - 我找到了这个***.com/questions/17809056/… 和。稍微修改一下就可以了！我对你的债务感到惊讶和巨大。

【参考方案2】：

也许这就是你想要的......：D

function dropdownMenu1565Set(val)
	if(val.innerHTML!="")$('#dropdownMenu1565').val(val.innerHTML);$('#dropdownMenu1565').html(val.innerHTML);
	else$('#dropdownMenu165').val('');$('#dropdownMenu165').html('Select Client');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<div class="dropdown"><button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton" onclick="dropdownMenu1565Set(this);">Lloyd - 1 _ $ Brayton</a></li>
    <li><a id="yy-muiThreet" onclick="dropdownMenu1565Set(this);">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton" onclick="dropdownMenu1565Set(this);">Wilson Britton</a></li>
    <li><a id="yy-gilbertMinto" onclick="dropdownMenu1565Set(this);">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney" onclick="dropdownMenu1565Set(this);">Thomasina Laney</a></li>
  </ul>
</div>

【讨论】：

Adarsh 谢谢，但现在一切正常——昨天我需要你的时候你在哪里哈哈。但希望其他人会发现这个问题很有用，并且您的答案看起来很优雅（尽管它让我感到困惑）。谢谢 - 现在，如果你想解决我的下一个烂摊子：***.com/questions/33752771/… 我将永远欠你的债。

你为什么不将此标记为答案（如果有效..）哈哈。：D

Ardash 感谢看到页面错过了特定位“名称可以包含字母、数字、下划线和美元符号。”因为我太累了。所以现在我知道了 - 没有破折号......这有点烦人。

看起来代码仍然适用于所有这些条件

只是想再次说声谢谢。转向“生产”，你的这段代码无疑为我节省了 4-10 个小时。正如我们在这里所说的，Mahalo nui loa