Bootstrap 4.x Dropdowsオプションの展示

目次

Bootstrap 4.x Dropdowsオプションの展示

使用hidden.bs.dropdownイベント

HTMLコード:

Javascriptコード

選択された簡単な表示

Bootstrap 4.x Dropdowsオプションの展示
Bootstrap 4.xの中でDropdownsは選択されたオプションをどのように示すかの例を直接与えていません.また、イベントの説明における関連属性の説明も十分に明確ではない.新人は分かりにくいです.Dropdownsイベントに基づく実現方法を以下に示す.
hidden.bs.dropdown事件を使う
まず、イベントバインディングの対象を決定します.イジェクト容器(つまりdropdown-menuバインディングの要素)の親要素はイベントのバインディング要素です.
このイベントには2つの属性が含まれています.

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">selectedValuea>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
    <a class="dropdown-item" href="#">Value1a>
    <div class="dropdown-divider">div>
    <a class="dropdown-item" href="#">Value2a>
  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
  });

次の記事ではAnglarJS統合に基づくDropdownsの実現方法を示します.