如何在引导程序下拉列表的标题中显示所选项目?以及如何在javascript警告框中显示所选项目?

时间:2015-07-08 04:50:57

标签: javascript jquery html twitter-bootstrap drop-down-menu

我已尝试过在此类问题中给出的大量示例,但仍无法找到如何在引导程序下拉列表的标题上显示所选项目以及如何通过javascript获取所选项目。如果有人知道该代码,请帮助我提供我应该包含在head部分的链接。因为我认为可能是我在头部缺少了一些东西。 这是样本下拉列表。

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

1 个答案:

答案 0 :(得分:0)

我修改了一点HTML,并添加了jquery事件:

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