如何在自举下拉列表的标题中显示所选项目？以及如何在javascript警报框中显示所选项目？ [英] How to display selected item in the title of the bootstrap dropdown list ? and how to display selected item on a javascript alert box?

问题描述

我已经尝试了很多这样的问题的例子，但仍然找不到如何在引导下拉列表的标题上显示所选项目，以及如何通过javascript获取所选项目。如果有人知道代码，请帮助我在头部中包含的链接。因为我认为这可能是我在头部缺少一些东西。
这里是样本下拉列表。

 < div class =btn-group> 
< button type =buttonclass =btn btn-default dropdown-toggledata-toggle =dropdown> 
选项：< span class =selection>选项1< / span>< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>选项1< / a>< / li> 
< li>< a href =＃>选项2< / a>< / li> 
< li>< a href =＃>选项3< / a>< / li> 
< / ul> 
< / div> 
  

解决方案

我修改了HTML一点，并添加了 jquery 事件：

 < div class =dropdown> 
< button class =btn btn-default dropdown-toggletype =buttonid =dropdownMenu1data-toggle =dropdownaria-haspopup =truearia-expanded =true> ; 
下拉菜单：< span class =selected>< / span> 
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menuaria-labelledby =dropdownMenu1> 
< li>< a href =＃> Action< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他地方< / a>< / li> 
< li>< a href =＃>分离的链接< / a>< / li> 
< / ul> 
< / div> 
  

Jquery：

 code> $（'div.dropdown ul.dropdown-menu li a'）。click（function（e）{
 $（'。selected'）。html（$（this）.html（） ）; 
}）
  

- 演示 -

I have tried lots of examples given in this type of questions but still can't find how to display selected item on the title of the bootstrap dropdown list and how to get the selected item through javascript. if someone know the code please help me with the links that I should include in the head section. Because I think it may be I missing something in the head section. here is sample dropdown list.

<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   Option: <span class="selection">Option 1</span><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
   </ul>
</div>

解决方案

I am modified HTML little bit, and added jquery event:

<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="selected"></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Jquery:

$('div.dropdown ul.dropdown-menu li a').click(function (e) {
    $('.selected').html($(this).html());
})

--DEMO--

这篇关于如何在自举下拉列表的标题中显示所选项目？以及如何在javascript警报框中显示所选项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！