如何将Bootstrap下拉列表用作HTML表单< select> [英] How to use Bootstrap dropdown as an HTML form <select>

问题描述

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

I think I may be being dense. I wanted to use a Bootstrap dropdown button to select from a list of names. Can I do this in plain HTML and/or very simple jQuery?

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

IE I want to use a Bootstrap dropdown as an HTML form select input.

<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选择"相当丑陋，因此，如果可以的话，宁愿使用下拉列表.其他一切都正常，但我对如何使用下拉菜单进行选择感到困惑.

I put the form together to look OK (be easy to use etc) and then set about cleaning up to make it functional. The basic BS "Select" is rather ugly so would rather use a dropdown list if I can. Everything else is going OK but I am stuck as to how to use a dropdown as a select.

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

Thanks to Cory and previous SO poster this works for me and I thought might be helpful for someone else

<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 ，则在第三行中使用:

If you want the text not an id then, in the third line use:

var sel = $(this).text()

以下是Adarsh的贡献，但很出色.我试图传递值，但是Adarsh的解决方案将所选用户的名称添加到按钮中，以提供基本的用户反馈.因此，您最终得到:

Adarsh's contribution below is off topic but brilliant. I was was trying to pass values but Adarsh's solution adds the name of the selected user to the button providing essential user feedback. So you end up with:

感谢完美的解决方案的人.

Thanks for a perfect solution people.

推荐答案

您是否正在寻找类似的东西? http://jsfiddle.net/rszens8z/1/

You you looking for something like this? 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/组件/#btn-下拉列表

You can change the look of it with some built in BS CSS http://getbootstrap.com/components/#btn-dropdowns

这篇关于如何将Bootstrap下拉列表用作HTML表单< select>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！