如何引导下拉列表的标题显示选中的项目? 以及如何在一个JavaScript警告框显示选定的项目?

2019-10-23 16:58发布

我已经试过很多这种类型的问题,给出的例子,但仍无法找到如何在引导下拉列表的标题以及如何通过javascript来获得所选择的项目显示所选项目。 如果有人知道代码,请帮助我,我应该包括在头部分中的链接。 因为我认为这可能是我失踪的头部分的东西。 这里是样本下拉列表。

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

Answer 1:

我修改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--



文章来源: How to display selected item in the title of the bootstrap dropdown list ? and how to display selected item on a javascript alert box?