ฉันจะแสดงกล่องเลือกรายการ (ดร็อปดาวน์) ด้วย bootstrap ได้อย่างไร

มีสิ่งใดนอกกรอบที่ bootstrap รองรับเพื่อแสดงรายการแบบดรอปดาวน์ปกติหรือไม่ นั่นคือที่กล่องรายการแบบหล่นลงเป็นรายการของค่าและถ้าเลือกเติมเนื้อหาของกล่องรายการ?

สิ่งที่คล้ายกับฟังก์ชั่นนี้หรือไม่?

http://bootstrapformhelpers.com/select/

Bootstrap 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

อีกตัวเลือกหนึ่งคือการทำให้ Bootstrap ดรอปดาวน์ทำงานเหมือนตัวเลือกโดยใช้ 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%;}

อีกตัวเลือกหนึ่งอาจจะใช้บูตเลือก ด้วยคำพูดของตัวเอง:

select / multiselect แบบกำหนดเองสำหรับ Bootstrap โดยใช้ปุ่มดรอปดาวน์ออกแบบมาเพื่อทำงานเหมือนกับ Bootstrap ทั่วไปที่เลือก

อีกวิธีหนึ่งโดยไม่ใช้. 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>

รหัสของเบ็นต้องการให้ div 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 and 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>ไม่สามารถใช้งานได้และต้องเป็น 'จำลอง' พร้อมกับดรอปดาวน์

ตัวอย่างเช่นถ้าคุณต้องการสร้างกลุ่มอินพุต bootstrap เช่นปุ่มที่มีดรอปดาวน์ (ดูที่http://getbootstrap.com/components/#input-groups-buttons-dropdowns ) น่าเสียดายที่<select>ไม่รองรับกลุ่มอินพุตมันจะแสดงผลไม่ถูกต้อง

หรือใครแก้ไขเรื่องนี้แล้ว? ฉันจะสนใจวิธีแก้ปัญหามาก

และเพื่อให้มันซับซ้อนยิ่งขึ้นคุณไม่สามารถใช้เพื่อ$(this).text()จับสิ่งที่ผู้ใช้เลือกในแบบเลื่อนลงได้หากคุณใช้ glypicons หรือไอคอนตัวอักษรที่ยอดเยี่ยมเป็นเนื้อหาสำหรับดรอปดาวน์ ตัวอย่างเช่น: <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) เพื่อให้ได้สิ่งที่คุณต้องการ

ฉันหวังว่ามันชัดเจนและสามารถช่วยใครสักคน :-)