在引导按钮中显示选定的项目下拉菜单标题/占位符文本 [英] Display Selected Item in Bootstrap Button Dropdown Title / place holder text

问题描述

这个问题在Stackoverflow上被问了几次 - 但是我仍然无法到达它的底部......再加上我的查询将投入更多的下拉菜单。所以我有两个下拉菜单和一个搜索。我想从下拉菜单中选择，并选择'取代'下拉菜单。但我还需要记住，在搜索后，它将查询这些选定字段的数据库。

 <！ -  - 搜索框开始 - > 
< form> 
< div class =well carousel-search hidden-phone> 
< div class =btn-group> 
 < ul class =dropdown-menu> 
< li>< a href =＃>商品I< / a>< / li> 
< li>< a href =＃>第II项< / a>< / li> 
< li>< a href =＃>第III项< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>其他< / a>< / li> 
< / ul> 
< / div> 
 
< div class =btn-group> 
 < ul class =dropdown-menu> 
< li>< a href =＃>商品I< / a>< / li> 
< li>< a href =＃>第II项< / a>< / li> 
< li>< a href =＃>第III项< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>其他< / a>< / li> 
< / ul> 
< / div> 
< div class =btn-group> 
< button type =submitclass =btn btn-primary>搜寻< / button> 
< / div> 
 
< / div> 
< / form> 
<！ - 搜索框结束 - > 
  

解决方案

您可以像这样设置选定的下拉文字。

  $（。dropdown-menu li a）。click（function（）{
 var selText = $ （this）.text（）; 
 $（this）.parents（'。btn-group'）。find（'。dropdown-toggle'）。html（selText +'< span class =caret> ;< / span>'）; 
}）; 
  

然后点击搜索按钮以获取选定的值：

  $（＃btnSearch）。click（function（）{
 alert（$（'。btn-select'）。text（）+ ，+ $（'。btn-select2'）。text（））; 
}）; 
  

工作演示： http://www.bootply.com/63926

This question has been asked a few times on Stackoverflow - however I still cant get to the bottom of it... plus my query is throwing more dropdowns into play. So I have two dropdowns and a search. I want to select from the dropdowns and the 'selected' to replace the dropdown place holder text. But I also need to keep in mind that after hitting search it will query a database for these selected fields.

            <!-- Search box Start -->
                    <form>
                        <div class="well carousel-search hidden-phone">
                            <div class="btn-group">
                                <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Country<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                    <li><a href="#">Item I</a></li>
                                    <li><a href="#">Item II</a></li>
                                    <li><a href="#">Item III</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Other</a></li>
                                    </ul>
                        </div>

                            <div class="btn-group">
                                <a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region/City<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Item I</a></li>
                                    <li><a href="#">Item II</a></li>
                                    <li><a href="#">Item III</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Other</a></li>
                                    </ul>
                            </div>
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary">Search</button>
                            </div>

                        </div>
                    </form>
            <!-- Search box End -->

解决方案

You can set the selected dropdown text like this..

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});

And then handle the search button click to get the selected values:

$("#btnSearch").click(function(){
    alert($('.btn-select').text()+", "+$('.btn-select2').text());
});

Working demo: http://www.bootply.com/63926

这篇关于在引导按钮中显示选定的项目下拉菜单标题/占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！