Cách hiển thị mục đã chọn trong tiêu đề thả xuống nút khởi động

Tôi đang sử dụng thành phần Dropstrap Dropdown trong ứng dụng của mình như thế này:

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

Tôi muốn hiển thị mục đã chọn làm nhãn btn. Nói cách khác, thay thế "Vui lòng chọn từ danh sách" bằng mục danh sách đã được chọn ("Mục I", "Mục II", "Mục III").

Theo như tôi hiểu thì vấn đề của bạn là bạn muốn thay đổi văn bản của nút bằng cách nhấp vào văn bản được liên kết, nếu vậy bạn có thể thử cái này: 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());

   });

});

Theo nhận xét của bạn:

điều này không hiệu quả với tôi khi tôi có danh sách mục được <li>điền thông qua lệnh gọi ajax.

vì vậy bạn phải ủy thác sự kiện cho cha mẹ tĩnh gần nhất bằng .on()phương thức jQuery:

 $(function(){

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

});

Ở đây sự kiện được ủy quyền cho cha mẹ tĩnh $(".dropdown-menu"), mặc dù bạn cũng có thể ủy thác sự kiện này $(document)vì nó luôn có sẵn.

Cập nhật cho Bootstrap 3.3.4:

Điều này sẽ cho phép bạn có văn bản hiển thị và giá trị dữ liệu khác nhau cho từng yếu tố. Nó cũng sẽ tiếp tục các caret trên lựa chọn.

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>

Ví dụ về Fiddle

Tôi đã có thể cải thiện một chút câu trả lời của Jai ​​để hoạt động trong trường hợp bạn có nhiều hơn một nút thả xuống với một bản trình bày khá tốt hoạt động với bootstrap 3:

Mã cho nút

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

Đoạn trích 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());

});

Tôi cũng đã thêm lề 5px cho lớp "lựa chọn".

Hàm jQuery đơn này sẽ làm tất cả những gì bạn cần.

$( 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>');
        });
    });
});

Đây là phiên bản của tôi về điều này mà tôi hy vọng có thể tiết kiệm thời gian của bạn :)

PHẦN MỀM jQuery:

$(".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");
});

PHẦN 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>  

Điều này hoạt động trên nhiều hơn một thả xuống trong cùng một trang. Hơn nữa, tôi đã thêm dấu mũ vào mục đã chọn:

    $(".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());
    });

bạn cần sử dụng thêm lớp opentrong <div class="btn-group open">

và lithêmclass="active"

Sửa đổi thêm dựa trên câu trả lời từ @Kyle khi $ .text () trả về chuỗi chính xác, vì vậy thẻ caret được in theo nghĩa đen, hơn là một đánh dấu, chỉ trong trường hợp ai đó muốn giữ nguyên dấu mũ trong trạng thái thả xuống.

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

Tôi đã sửa tập lệnh cho nhiều lần thả xuống trên trang

$(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());
   });
});

Một cách đơn giản khác (Bootstrap 4) để làm việc với nhiều lần thả xuống

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

Nó dường như là một vấn đề dài. Tất cả những gì chúng tôi muốn chỉ là thực hiện một thẻ chọn trong nhóm đầu vào. Nhưng bootstrap sẽ không làm điều đó: https://github.com/twbs/bootstrap/issues/10486

mẹo chỉ là thêm lớp "btn-group" vào div cha

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>');       
});

Khi bạn nhấp vào mục, thêm một số thuộc tính dữ liệu như data-chọn-item = 'true' và lấy lại.

Hãy thử thêm dữ liệu được chọn-item = 'true' cho phần tử li mà bạn đã nhấp, sau đó

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

Trước khi thêm thuộc tính này, bạn chỉ cần xóa mục đã chọn dữ liệu hiện có trong danh sách. Hy vọng điều này sẽ giúp bạn

Để biết thông tin về việc sử dụng thuộc tính dữ liệu trong jQuery, hãy tham khảo dữ liệu jQuery

Tôi đã phải đặt một số javascripts được hiển thị ở trên bên trong mã "document. Yet". Nếu không thì họ đã không làm việc. Có lẽ rõ ràng cho nhiều người, nhưng không phải cho tôi. Vì vậy, nếu bạn đang thử nghiệm xem xét tùy chọn đó.

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

Ví dụ:

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>

Tôi sử dụng phần tử BtnCaption mới để chỉ thay đổi văn bản của nút.

Dán vào $(document).ready(function () {}văn bản sau

JavaScript:

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

:not(.disabled) không cho phép sử dụng các mục menu bị vô hiệu hóa