Question

我想我可能会很紧张。我想使用Bootstrap下拉按钮从名称列表中进行选择。我可以用纯HTML和/或非常简单的jQuery做到这一点吗？ IE我想使用Bootstrap下拉列表作为HTML表单选择输入。＆lt; button class =＆＃34; btn btn-warning dropdown-toggle＆＃34;类型=＆＃34;按钮＆＃34; ID =＆＃34; dropdownMenu1565＆＃34; 数据肘节=＆＃34;下拉＆＃34;咏叹调-haspopup =＆＃34;真＆＃34;咏叹调膨胀=＆＃34;真＆＃34;＆GT; 选择客户端＆lt; span class =＆＃34; caret＆＃34;＆gt;＆lt; / span＆gt; ＆LT; /按钮＆GT; ＆lt; ul class =＆＃34;下拉菜单＆＃34;名称=＆＃34; XX-selectClient＆＃34;咏叹调-labelledby =＆＃34; dropdownMenu1565＆＃34;＆GT; ＆lt; li＆gt;＆lt; a id =＆＃34; yy-lloydBrayton＆＃34;＆gt; Lloyd Brayton＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a id =＆＃34; yy-muiThreet＆＃34;＆gt; Mui Threet＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a id =＆＃34; yy-wilsonBritton＆＃34;＆gt;威尔逊布里顿＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a id =＆＃34; yy-gilbertMinto＆＃34;＆gt; Gilbert Minto＆lt; / a＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; a id =＆＃34; yy-thomasinaLaney＆＃34;＆gt; Thomasina Laney＆lt; / a＆gt;＆lt; / li＆gt; 我把表格放在一起看起来很好（易于使用等），然后开始清理以使其正常运行。基本BS＆＃34;选择＆＃34;是相当丑陋的，如果可以的话，宁可使用下拉列表。其他一切都很好，但我仍然坚持如何使用下拉列表作为选择。编辑：感谢Cory和以前的SO海报这对我有用，我认为可能对其他人有帮助＆LT;脚本＆GT; $（＆＃34;。dropdown-menu a＆＃34;）。click（function（）{ var selectId = $（this）.attr（＆＃39; id＆＃39;） $（＆＃39;＃formId＆＃39;）。submit（function（eventObj）{ $（this）.append（＆＃34;＆lt;输入类型=＆＃39;隐藏＆＃39; name =＆＃39; selectClient＆＃39; value =＆＃34; + selectId +＆＃34; /＆gt; ＆＃34）; 返回true; }）; }）＆LT; /脚本＆GT; 如果您希望文本不是id，那么在第三行使用： var sel = $（this）.text（）编辑：下面的阿达什的贡献是偏离主题，但很棒。我试图传递价值，但Adarsh的解决方案将所选用户的名称添加到按钮，提供必要的用户反馈。所以你最终得到：感谢人们的完美解决方案。

Answer 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

更改其外观

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: