부트 스트랩으로 목록 선택 상자 (드롭 다운)를 어떻게 렌더링 할 수 있습니까?

부트 스트랩이 "일반적인"사실상 드롭 다운 목록 선택 상자를 렌더링하도록 지원하는 것이 있습니까? 즉, 드롭 다운 상자가 값 목록이며 선택하면 목록 상자의 내용이 채워 집니까?

이 기능과 비슷한 것이 있습니까?

http://bootstrapformhelpers.com/select/

부트 스트랩 3은 .form-control클래스를 사용하여 양식 구성 요소의 스타일을 지정합니다.

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

http://getbootstrap.com/css/#forms-controls

또 다른 옵션은 부트 스트랩 드롭 다운이 jQuery를 사용하여 선택처럼 동작하도록하는 것입니다 ...

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

http://www.bootply.com/b4NKREUPkN

Skelly의 훌륭하고 쉬운 답변은 이제 Bootstap의 드롭 다운 구문이 변경되어 구식입니다. 대신 이것을 사용하십시오 :

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

테스트 : http://jsfiddle.net/brynner/hkwhaqsj/6/

HTML

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
    <ul class="dropdown-menu option" role="menu">
        <li id="1"><a href="#">One</a></li>
        <li id="2"><a href="#">Two</a></li>
    </ul>
</div>

jQuery

$('body').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(v);
});

CSS

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}

또 다른 옵션은 bootstrap select를 사용하는 것 입니다. 자신의 말로 :

버튼 드롭 다운을 사용하여 부트 스트랩에 대한 사용자 정의 선택 / 다중 선택은 일반 부트 스트랩 선택처럼 작동하도록 설계되었습니다.

.form-control을 사용하지 않는 다른 방법은 다음과 같습니다.

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 3</a></li>
  </ul>
</div>

Ben의 코드는 부모 div가 양식 그룹 클래스를 갖도록 요구합니다 (btn-group을 사용하고 있음). 가장 가까운 div를 검색하는 약간 다른 버전이며 조금 더 빠를 수도 있습니다.

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});

Bootstrap3 .form-control은 멋지지만 버튼 및 ul 옵션이있는 드롭 다운을 좋아하거나 필요로하는 사람들을 위해 업데이트 된 코드는 다음과 같습니다. Steve가 코드를 편집하여 해시 링크로 점프하고 선택 후 드롭 다운을 닫는 것을 수정했습니다.

Steve, Ben 및 Skelly에게 감사합니다!

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
    $(this).closest('.dropdown').removeClass("open");
    return false;
});

현재 드롭 다운과 싸우고 있으며 내 경험을 공유하고 싶습니다.

구체적인 상황이 있습니다 <select>사용할 수없고 드롭 다운으로 '모방'해야하는 있습니다.

예를 들어 드롭 다운이있는 버튼과 같은 부트 스트랩 입력 그룹을 생성하려는 경우 ( http://getbootstrap.com/components/#input-groups-buttons-dropdowns 참조 ) 불행히도 <select>입력 그룹에서는 지원되지 않으며 제대로 렌더링되지 않습니다.

아니면 아무도 이미 이것을 해결 했습니까? 솔루션에 매우 관심이 있습니다.

그리고 더 복잡하게 만들기 위해 $(this).text()글리프 톤이나 멋진 아이콘을 드롭 다운의 컨텐츠로 사용하는 경우 드롭 다운에서 사용자가 선택한 것을 포착하기 위해 단순히 사용할 수 없습니다 . 예를 들어 : <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> 이 경우 텍스트가 없기 때문에 텍스트를 추가하면 드롭 다운 요소에도 표시되므로 원하지 않습니다.

가능한 두 가지 해결책을 찾았습니다.

1) $(this).html()선택한 <li>요소의 내용을 가져 와서 검사하는 데 사용하지만 <a href="#0"><i class="fa fa-minus"></i></a>필요한 것을 추출하기 위해 이것과 함께 연주해야합니다.

2) $(this).text()숨겨진 범위에서 요소의 텍스트를 사용 하고 숨 깁니다 <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. 나에게 이것은 간단하고 우아한 솔루션입니다. 필요한 텍스트를 넣고 텍스트를 숨길 $(this).html()수 있으며 옵션 1)과 같은 결과 변환을 수행하지 않아도 필요한 것을 얻을 수 있습니다.

나는 그것이 분명하고 누군가를 도울 수 있기를 바랍니다 :-)