web-dev-qa-db-ja.com

選択したオプションをbootstrapドロップダウンリストメニューに表示する

bootstrapメニューにドロップダウンリストがあります。

<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</li>

現在のように、「オプションを選択」ではなく、ドロップダウンのタイトルとしてドロップダウンで選択したオプションを取得しようとしています。私はこれと他のいくつかのサイトで見つかったいくつかの解決策を試しましたが、それらを機能させることができません。

誰かがこれを手伝ってくれる？

javascriptjqueryhtmlcsstwitter-bootstrap
25
onedevteam.com

これはあなたのために働くはずです：

<div class="dropdown">
    <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
      <span id="selected">Chose option</span><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>

そしてスクリプト：

  $('.dropdown-menu a').click(function(){
    $('#selected').text($(this).text());
  });

選択時に値を変更するには、テキスト「Choose option」を<span>内にラップする必要があります。

これが作業コードです： http://liveweave.com/U4BpiH

28
Ganesh Kumar

次のようにあなたのhtmlを変更してください：

 <li class="dropdown">
    <button id="options" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" >Chose option<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#" >Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#" >Option 3</a></li>
            <li><a href="#" >Option 4</a></li>
        </ul>
</li>

そしてJavaScript側では次のようにします：

 <script>

        $(document).ready(function(){
            $(".dropdown-menu li a").click(function(){
            $("#options").text($(this).text());
            });
        });
    </script>
4
Nivs

「onclick」を使用して解決策を見つけた

onclick="$('#your-main-button-name').html('The text you want to show');"

それが役に立てば幸い！ :)

0
Mourad

この簡単な例を試すことができます。

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
   </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Item I</a></li>
   <li><a tabindex="-1" href="#">Item II</a></li>
   <li><a tabindex="-1" href="#">Item III</a></li>
   <li class="divider"></li>
   <li><a tabindex="-1" href="#">Other</a></li>
 </ul>
</div>

以下のスクリプトを追加します。

$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

また、このサンプルを http://jsbin.com/owuyix/4/edit で試すこともできます

0
Abilash Nadesan

私は同じ問題を抱えていましたが、ここに私が見つけた解決策があります。

<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" id="options"> <span id="opt">Chose option</span> <span class="caret"></span>
    </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" id="1" href="#" >Option 1</a></li>
        <li><a class="dropdown-item" id="2" href="#">Option 2</a></li>
        <li><a class="dropdown-item" id="3" href="#" >Option 3</a></li>
        <li><a class="dropdown-item" id="4" href="#" >Option 4</a></li>
      </ul>
</div>

<script type="text/javascript">
$(function(){
  $("#1").click(function () {
  $("#opt").text($(this).text());
  });
  $("#2").click(function () {
  $("#opt").text($(this).text());
  });
  $("#3").click(function () {
  $("#opt").text($(this).text());
  });
  $("#4").click(function () {
  $("#opt").text($(this).text());
  });
});
</script>
0
user9026942