Cara Menampilkan Item yang Dipilih di Judul Dropdown Tombol Bootstrap

Saya menggunakan komponen Dropdown bootstrap di aplikasi saya seperti ini:

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

Saya ingin menampilkan item yang dipilih sebagai label btn. Dengan kata lain, ganti "Silakan Pilih Dari Daftar" dengan item daftar yang telah dipilih ("Item I", "Item II", "Item III").

Sejauh yang saya mengerti masalah Anda adalah bahwa Anda ingin mengubah teks tombol dengan mengklik tautan teks, jika demikian Anda dapat mencoba yang ini: http://jsbin.com/owuyix/4/edit

 $(function(){

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

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

   });

});

Sesuai komentar Anda:

ini tidak berfungsi untuk saya ketika saya memiliki daftar item yang <li>diisi melalui panggilan ajax.

jadi Anda harus mendelegasikan acara ke orang tua statis terdekat dengan .on()metode jQuery:

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

Di sini acara didelegasikan ke induk statis $(".dropdown-menu"), meskipun Anda juga dapat mendelegasikan acara tersebut $(document)karena selalu tersedia.

Diperbarui untuk Bootstrap 3.3.4:

Ini akan memungkinkan Anda untuk memiliki tampilan teks dan nilai data yang berbeda untuk setiap elemen. Itu juga akan mempertahankan tanda sisipan pada seleksi.

JS:

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

Contoh JS Fiddle

Saya dapat sedikit meningkatkan jawaban Jai untuk bekerja jika Anda memiliki lebih dari satu tombol dropdown dengan presentasi yang cukup bagus yang bekerja dengan bootstrap 3:

Kode untuk Tombol

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

Cuplikan JQuery

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

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

Saya juga menambahkan hak margin 5px ke kelas "seleksi".

Fungsi jQuery tunggal ini akan melakukan semua yang Anda butuhkan.

$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});

Ini adalah versi saya ini yang saya harap dapat menghemat waktu Anda :)

jQuery PART:

$(".dropdown-menu").on('click', 'li a', function(){
  var selText = $(this).children("h4").html();


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

BAGIAN HTML:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Yang ini berfungsi pada lebih dari satu dropdown di halaman yang sama. Selanjutnya, saya menambahkan tanda sisipan pada item yang dipilih:

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

Anda perlu menggunakan add class opendi <div class="btn-group open">

dan di litambahkanclass="active"

Lebih lanjut dimodifikasi berdasarkan jawaban dari @Kyle sebagai $ .text () mengembalikan string yang tepat, sehingga tag tanda sisipan dicetak secara harfiah, daripada sebagai markup, untuk berjaga-jaga jika seseorang ingin menjaga tanda sisipan utuh dalam dropdown.

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});

Saya telah mengoreksi skrip untuk beberapa dropdown pada halaman

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

Cara sederhana lain (Bootstrap 4) untuk bekerja dengan beberapa dropdown

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

Sepertinya ini masalah panjang. Yang kami inginkan hanyalah menerapkan tag pilih di grup input. Tetapi bootstrap tidak akan melakukannya: https://github.com/twbs/bootstrap/issues/10486

Triknya adalah menambahkan kelas "btn-group" ke div induk

html:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

js:

$(".dropdown-menu li a").click(function(e){
    var selText = $(this).text();
    $(this).parents('.input-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');       
});

Setelah Anda mengklik item, tambahkan beberapa atribut data seperti data-selected-item = 'true' dan dapatkan kembali.

Coba tambahkan data-selected-item = 'true' untuk elemen li yang Anda klik, lalu

   $('ul.dropdown-menu li[data-selected-item] a').text();

Sebelum menambahkan atribut ini, Anda cukup menghapus item yang dipilih data yang ada dalam daftar. Semoga ini bisa membantu Anda

Untuk informasi tentang penggunaan atribut data dalam jQuery, lihat data jQuery

Saya harus meletakkan beberapa javascripts yang ditampilkan di atas di dalam kode "document.ready". Kalau tidak, mereka tidak bekerja. Mungkin jelas bagi banyak orang, tetapi tidak bagi saya. Jadi jika Anda menguji lihat opsi itu.

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

Sebagai contoh:

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

Saya menggunakan BtnCaption elemen baru untuk mengubah teks tombol saja .

Rekatkan ke $(document).ready(function () {}teks berikut

JavaScript:

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled) jangan izinkan menggunakan item menu yang dinonaktifkan