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

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

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