選択したブートストラップドロップダウンオプションから価値を得る

Question

私は開発を学んでおり、バックグラウンドイメージオプションが3つあるブートストラップのドロップダウンと、選択したオプションを渡すことでバックグラウンドを変更します。現時点では、選択したオプションの価値を取得する方法も見つけられません。選択したオプションの値を取得して使用する方法を見つけるために高値と低値を検索しましたが、何も見つかりませんでした。ブートストラップのドキュメントも曖昧です。

これまでのところ、ドロップダウンがOKレンダリング...

<div class="dropdown open"> 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Background 
      </button> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
      <a class="dropdown-item" href="#">Image 1</a> 
      <a class="dropdown-item" href="#">Image 2</a> 
      <a class="dropdown-item" href="#">Image 3</a> 
      </div> 
     </div> 

が、その後、私は動けなくなる...

$('#dropdownMenuButton').on('hidden.bs.dropdown', function() { 
    // get selected option and change background 
}) 

私は、背景を変更することができますが、私はちょうどの値を取得することはできません選択されたオプション。

私はそれがとても難しいとは思えませんので、私は明らかに何かが欠けています。誰でも助けてくれますか？

おかげで、

LB

Answer 1

これがクリックした項目のテキスト値を返します。しかし、これはselect要素ではないことに注意してください。代わりに、あなたは、 "ドロップダウン項目" のclickイベントをリッスンする "hidden.bs.dropdown" イベントの

$('.dropdown-item').click(function() { 
    console.log($(this).text()); 
}); 

Answer 2

：

$('#dropdownMenuButton + [aria-labelledby="dropdownMenuButton"] a').on('click', function (e) { 
 
    e.preventDefault(); 
 
    // get selected option and change background 
 
    var ele = this; 
 
    console.log(ele.textContent); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="dropdown open"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Background 
 
    </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Image 1</a> 
 
     <a class="dropdown-item" href="#">Image 2</a> 
 
     <a class="dropdown-item" href="#">Image 3</a> 
 
    </div> 
 
</div>