복붙노트

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

JQUERY

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

해결법

  1. 1.http://jsbin.com/owuyix/4/edit : 지금까지 내가 이해로 문제는 당신이 하나를 시도 할 수 있습니다 경우 클릭하면 링크 된 텍스트와 버튼의 텍스트를 변경하려는 것입니다

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

   });

});

    귀하의 의견에 따라 :

    나는 아약스 호출을 통해 채워 목록 항목은

  2. 때이 나를 위해 작동하지 않습니다.

    당신은 CSTE 연구진은 ()의 jQuery 방법으로 가장 가까운 정적 부모에 이벤트를 위임 할 수 있도록 :

     $(function(){

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

});

    당신이 항상 사용할 수도 있기 때문에 $ (문서)에 이벤트를 위임 할 수 있지만, 여기서 이벤트는, 정적 부모 $ ( ". 드롭 다운 메뉴")에게 위임한다.

  3. 2.부트 스트랩 3.3.4에 대한 업데이트 :

    부트 스트랩 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 바이올린 예

  4. 3.나는 약간은 꽤 좋은 프리젠 테이션에 하나 이상의 버튼 드롭 다운을 갖는 경우 작업에 자이의 답변을 향상시킬 수 있었다 부트 스트랩 3 일 :

    나는 약간은 꽤 좋은 프리젠 테이션에 하나 이상의 버튼 드롭 다운을 갖는 경우 작업에 자이의 답변을 향상시킬 수 있었다 부트 스트랩 3 일 :

    버튼의 코드

    <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 여백 오른쪽을 추가했다.

  5. 4.이 하나의 jQuery 기능은 당신이 필요로하는 모든 것을 할 것입니다.

    이 하나의 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>');
        });
    });
});

  6. 5.여기 당신의 시간의 일부를 저장할 수 있기를 바랍니다 어떤이의 나의 버전입니다 :)

    여기 당신의 시간의 일부를 저장할 수 있기를 바랍니다 어떤이의 나의 버전입니다 :)

    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>

  7. 6.같은 페이지에 하나 이상의 드롭 다운에이 한 작품. 또한, 내가 선택한 항목에 캐럿을 추가 :

    같은 페이지에 하나 이상의 드롭 다운에이 한 작품. 또한, 내가 선택한 항목에 캐럿을 추가 :

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

  8. 7.당신은 < "BTN 그룹 열기"= DIV 클래스>에서 열려 추가 클래스를 사용할 필요가

    당신은 < "BTN 그룹 열기"= DIV 클래스>에서 열려 추가 클래스를 사용할 필요가

    및 선형에 추가 클래스 = "활성"

  9. 8.여러 드롭 다운과 함께 작업하는 또 다른 간단한 방법 (부트 스트랩 4)

    여러 드롭 다운과 함께 작업하는 또 다른 간단한 방법 (부트 스트랩 4)

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

  10. 9.추가로 @Kyle에서 대답에 기초하여 수정 된 캐럿 태그의 경우 사람이 드롭 다운에서 그대로 캐럿을 유지하려는 그냥, 마크 업으로보다, 그대로 인쇄되도록 $는 .text ()는 정확한 문자열을 반환합니다.

    추가로 @Kyle에서 대답에 기초하여 수정 된 캐럿 태그의 경우 사람이 드롭 다운에서 그대로 캐럿을 유지하려는 그냥, 마크 업으로보다, 그대로 인쇄되도록 $는 .text ()는 정확한 문자열을 반환합니다.

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

  11. 10.나는 페이지에 여러 드롭 다운을위한 스크립트를 수정 한

    나는 페이지에 여러 드롭 다운을위한 스크립트를 수정 한

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

  12. 11.긴 문제가 될 것으로 보인다. 모든 우리의 희망은 단지 입력 그룹에서 선택 태그를 구현한다. 그러나 부트 스트랩이 그것을 할 것입니다 : https://github.com/twbs/bootstrap/issues/10486

    긴 문제가 될 것으로 보인다. 모든 우리의 희망은 단지 입력 그룹에서 선택 태그를 구현한다. 그러나 부트 스트랩이 그것을 할 것입니다 : https://github.com/twbs/bootstrap/issues/10486

    트릭은 부모 DIV에 "BTN 그룹"클래스를 추가

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

  13. 12.일단 당신 = 항목이 데이터 선택 항목과 같은 일부 데이터 속성을 추가 '사실'을 클릭하고 다시 그것을 얻을.

    일단 당신 = 항목이 데이터 선택 항목과 같은 일부 데이터 속성을 추가 '사실'을 클릭하고 다시 그것을 얻을.

    다음, 당신이 클릭 한 것을 리튬 요소 = '진정한'데이터 선택 항목을 추가하십시오

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

    이 속성을 추가하기 전에 당신은 단순히 목록에 기존 데이터가 선택한 항목을 제거합니다. 이 당신을 도울 것입니다 희망

    jQuery를 데이터 속성 사용에 대한 자세한 내용은 jQuery를 데이터를 참조

  14. 13.나는 "document.ready"코드 내부에 위의 일부 표시 자바 스크립트를 넣어했다. 그렇지 않으면 그들은 작동하지 않았다. 아마 분명 많은,하지만 나를 위해. 그래서 당신은 그 옵션에 모습을 테스트하는 경우.

    나는 "document.ready"코드 내부에 위의 일부 표시 자바 스크립트를 넣어했다. 그렇지 않으면 그들은 작동하지 않았다. 아마 분명 많은,하지만 나를 위해. 그래서 당신은 그 옵션에 모습을 테스트하는 경우.

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

  15. 14.예를 들면 :

    예를 들면 :

    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를 사용합니다.

    $ (문서) .ready (함수 () {} 다음 텍스트로 붙여 넣기

    자바 스크립트 :

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

    :하지 (.disabled) 장애인 메뉴 항목을 사용하는 것을 허용하지 않습니다

    16. from https://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 무슨 $ (함수 () {}) 않습니다; 하다?  (0) 2020.10.19
[JQUERY] 자바 스크립트 또는 jQuery를 함께 현재 월의 첫 번째와 마지막 날짜를 가져 오기 [중복]  (0) 2020.10.19
[JQUERY] JQuery와 데이터 셀렉터  (0) 2020.10.19
[JQUERY] 자바 스크립트 - URL 경로의 부분을 얻기  (0) 2020.10.19
[JQUERY] 어떻게 ASP.NET MVC 컨트롤러에 JSON, jQuery로 복잡한 객체의 배열을 게시하려면?  (0) 2020.10.19
,

티스토리툴바