부트 스트랩 버튼 드롭 다운 제목에 선택한 항목을 표시하는 방법

내 응용 프로그램에서 다음과 같이 부트 스트랩 드롭 다운 구성 요소를 사용하고 있습니다.

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

선택한 항목을 btn 레이블로 표시하고 싶습니다. 즉, "목록에서 선택하십시오"를 선택한 목록 항목 ( "항목 I", "항목 II", "항목 III")으로 바꾸십시오.

내가 아는 한, 링크 된 텍스트를 클릭하여 버튼의 텍스트를 변경하려는 경우이를 시도 할 수 있습니다 .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());

   });

});

귀하의 의견에 따라 :

<li>아약스 호출을 통해 채워진 목록 항목이있을 때 이것은 작동하지 않습니다 .

따라서 .on()jQuery 메소드 를 사용하여 가장 가까운 정적 상위에 이벤트를 위임해야합니다 .

 $(function(){

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

});

여기서 이벤트는 정적 parent $(".dropdown-menu")에 위임되지만 $(document)항상 사용 가능하므로 이벤트도 위임 할 수 있습니다.

부트 스트랩 3.3.4 용으로 업데이트 :

이를 통해 각 요소마다 다른 표시 텍스트와 데이터 값을 가질 수 있습니다. 또한 선택시 캐럿을 유지합니다.

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>

JS 피들 예제

부트 스트랩 3에서 작동하는 꽤 좋은 프리젠 테이션으로 하나 이상의 버튼 드롭 다운이있는 경우 Jai의 대답을 약간 향상시킬 수있었습니다.

버튼 코드

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

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

});

또한 "선택"클래스에 5px 마진 오른쪽을 추가했습니다.

이 단일 jQuery 함수는 필요한 모든 것을 수행합니다.

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

여기에 내 버전이 있습니다. 시간을 절약 할 수 있기를 바랍니다. :)

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

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>  

이것은 동일한 페이지에서 둘 이상의 드롭 다운에서 작동합니다. 또한 선택한 항목에 캐럿을 추가했습니다.

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

당신은 클래스 open를 추가해야합니다<div class="btn-group open">

그리고 li추가class="active"

@Kyle의 대답을 기반으로 $ .text ()가 정확한 문자열을 반환하므로 추가로 수정되므로 캐럿 태그를 그대로 유지하려는 경우를 대비하여 캐럿 태그가 문자 그대로 표시됩니다.

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

페이지의 여러 드롭 다운에 대한 스크립트를 수정했습니다

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

여러 드롭 다운에서 작동하는 또 다른 간단한 방법 (Bootstrap 4)

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

긴 문제인 것 같습니다. 입력 그룹에 select 태그를 구현하기 만하면됩니다. 그러나 부트 스트랩은 그것을하지 않을 것입니다 : https://github.com/twbs/bootstrap/issues/10486

트릭은 단지 "btn-group"클래스를 부모 div에 추가하는 것입니다.

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

항목을 클릭하면 data-selected-item = 'true' 와 같은 일부 데이터 속성을 추가 하고 다시 가져옵니다.

시도 = '진정한'데이터 선택 항목을 추가 하기위한 리튬 요소 후, 당신은 클릭하는 것이

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

이 속성을 추가하기 전에 목록에서 기존 데이터 선택 항목을 제거하기 만하면됩니다. 희망이 당신을 도울 것입니다

jQuery의 데이터 속성 사용에 대한 정보는 jQuery 데이터를 참조하십시오.

위에 표시된 자바 스크립트를 "document.ready"코드 안에 넣어야했습니다. 그렇지 않으면 그들은 작동하지 않았다. 아마 많은 사람들에게는 분명하지만 나에게는 그렇지 않을 것입니다. 따라서 테스트하는 경우 해당 옵션을 살펴보십시오.

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

예를 들면 다음과 같습니다.

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>

버튼의 텍스트 만 변경하기 위해 새로운 요소 BtnCaption을 사용 합니다.

$(document).ready(function () {}다음 텍스트에 붙여 넣기

자바 스크립트 :

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

:not(.disabled) 비활성화 된 메뉴 항목을 사용할 수 없습니다