Bootstrap4.x Dropdowns选中选项的展示

Bootstrap 4.x Dropdowns选中选项的展示

Bootstrap 4.x中Dropdowns没有直接给出如何展示在选中的选项的例子。而在事件的说明中给出的相关属性说明也不是十分明确。新手很难理解。下面给出一种基于Dropdowns事件的实现方法。

使用hidden.bs.dropdown事件

首先确定事件绑定的对象。弹出容器（也就是dropdown-menu绑定的元素）的父元素是事件的绑定元素。

这个事件包含两个属性：

• relatedTarget
  引用当前选中的那个元素
• clickEvent
  引用鼠标点击的那个元素

HTML代码：

<div class="nav-item dropdown" id="aDropdown"><!--事件绑定元素-->
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">selectedValue</a><!--选中的元素-->
  <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <!--弹出元素-->
    <a class="dropdown-item" href="#">Value1</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Value2</a>
  </div>
</div>

当点击弹出框的一个选项时，在弹出框隐藏后事件被触发。下面代码可以看到绑定元素和内容索引的方法。

Javascript代码

  $("#aDropdown").on('hidden.bs.dropdown',function(e){
    console.log("sel:"+e.relatedTarget.textContent); //selectedValue
    console.log("clk:"+e.clickEvent.target.textContent); //你点击的那个选项值：Value1或Value2
  }); //console.log()在浏览器的控制台界面中查看，可以改成alert()直接弹出

一个显示选中的简单实现

显示选中的Dropdowns，需要自己在事件中实现。Bootstrap官方文档里没有看到给出选项列表的整套方案。道理也说得通，Bootstrap的Dropdowns不只是支持选项列表，还可以支持弹出表单卡等等。你可以用select简单实现。你选择了Dropdowns就要自己实现选中操作。下面给了一个简单的实现方案。

  $("#aDropdown").on('hidden.bs.dropdown',function(e){
    e.relatedTarget.textContent=e.clickEvent.target.textContent; //你点击的那个选项值：Value1或Value2
  });

下一篇文章会给出一个基于AngularJS整合的Dropdowns的实现方法……
(To be continue …）