मैं बूटस्ट्रैप के साथ सूची चयन बॉक्स (ड्रॉपडाउन) कैसे प्रस्तुत कर सकता हूं?

Question

क्या बॉक्स से बाहर कुछ भी है जो बूटस्ट्रैप "नियमित" डिफैक्टो ड्रॉप डाउन सूची चयन बॉक्स को रेंडर करने के लिए समर्थन करता है? वह है, जहां ड्रॉप डाउन बॉक्स मूल्यों की एक सूची है और यदि चयनित सूची बॉक्स की सामग्री को पॉप्युलेट करता है?

इस कार्यक्षमता के समान कुछ?

http://bootstrapformhelpers.com/select/

Comments

क्या आपका मतलब है - getbootstrap.com/css/#forms-controls (के तहत चयन )?

— चीयर्सजोश 16

यह सामान्य चयन कैसे काम करता है। इसके विकल्पों की एक सूची, आप एक का चयन करते हैं, और यह मान बन जाता है। आप किस तरह से अलग पूछ रहे हैं?

— बुरहान खालिद

अब मैं सोच रहा हूँ कि कैसे मैं उस दिखने वाले ड्रॉपडाउन आइकन को एक अच्छी दिखने वाली देखभाल के साथ बदल सकता हूं। :)

— Genxgeek

Getbootstrap.com से: यहां <select> तत्वों के उपयोग से बचें क्योंकि वे WebKit ब्राउज़रों में पूरी तरह से स्टाइल नहीं कर सकते हैं।

— स्टुअर्टाडनेट

मैं एक दृश्य ढांचे की खातिर एक देशी नियंत्रण की अवहेलना के विचार से असहज हूं। मैं वास्तव में आश्चर्यचकित हूं कि बूटस्ट्रैप में बेहतर समाधान का उपयोग नहीं किया गया है<select> । जबकि बूटस्ट्रैप <ul>ड्रॉप डाउन के लिए उपयोग करता है , जो अंततः उक्त टैग का एक भ्रामक उपयोग है। बूटस्ट्रैप में सभी JQuery के धूमधाम को देखते हुए, मुझे आश्चर्य है कि उन्होंने खुद को चुनने के लिए कैरेट में बदलाव क्यों नहीं किया। यह गलत तरीके से हल करने की तुलना में अधिक सुंदर समाधान प्रतीत होगा ul।

— जे एडवर्ड्स

Answer 1

बूटस्ट्रैप 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

Comments

अपने आप को यहाँ पाया क्योंकि मुझे एल्म के लिए बूटस्ट्रैप लुक की आवश्यकता थी बिना उपयोग के bootstrap.js। इसके और 'फुल' बूटस्ट्रैप सॉल्यूशन (@JonathanEdwards द्वारा आबंटित) के बीच मुख्य दृश्य अंतर यह है कि जो मेनू दिखाई देता है वह बॉक्सी है, कम सुंदर, जैसा कि alertआपका ब्राउज़र प्रदान करता है। छोटा मुद्दा वास्तव में। अन-क्लिक किया हुआ चयनकर्ता वास्तव में बूटस्ट्रैप वन जैसा दिखता है।

— रॉबर्ट

Answer 2

एक अन्य विकल्प बूटस्ट्रैप ड्रॉपडाउन को 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

Comments

उपयोगी जब आप एक फॉर्म नहीं चाहते हैं। धन्यवाद।

— जॉर्ज लेइताओ

Answer 3

Skelly का अच्छा और आसान जवाब अब बूटस्टैप में ड्रॉपडाउन सिंटैक्स में बदलाव के साथ पुराना हो गया है। इसके बजाय इसका उपयोग करें:

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

Answer 4

टेस्ट: http://jsfiddle.net/brynner/hkwhaqsj/6/

एचटीएमएल

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

सीएसएस

.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%;}

Comments

आपकी जरूरत के अनुसार '.select बटन' वर्ग में 'न्यूनतम-चौड़ाई' का उपयोग करें।

— ब्रायनर फरेरा

Answer 5

एक अन्य विकल्प बूटस्ट्रैप चयन का उपयोग कर सकता है । उनके अपने शब्दों पर:

बटन ड्रॉपडाउन का उपयोग करके बूटस्ट्रैप के लिए एक कस्टम चयन / बहुस्तरीय, जिसे नियमित बूटस्ट्रैप चयनों की तरह व्यवहार करने के लिए डिज़ाइन किया गया है।

Comments

जैसा कहता है, वैसा ही करता है और cdn के माध्यम से उपलब्ध होता है।

— scharfmn

Answer 6

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

Answer 7

बेन के कोड के लिए फॉर्म-ग्रुप क्लास (मैं बीटीएन-ग्रुप का उपयोग कर रहा था) के लिए पैरेंट डिव की आवश्यकता होती है, यह थोड़ा अलग संस्करण है जो सिर्फ निकटतम डिव के लिए खोज करता है और थोड़ा तेज भी हो सकता है।

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

Answer 8

बूटस्ट्रॉव .form-controlशांत है, लेकिन जो लोग प्यार करते हैं या बटन और उल विकल्प के साथ ड्रॉप-डाउन की आवश्यकता होती है, यहां अपडेट किया गया कोड है। मैंने स्टीव से कोड को हैश लिंक पर कूदने और चयन के बाद ड्रॉप-डाउन को बंद करने के लिए संपादित किया है।

स्टीव, बेन और स्केली के लिए धन्यवाद!

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

Answer 9

मैं वर्तमान में ड्रॉपडाउन के साथ लड़ रहा हूं और मैं अपने अनुभव साझा करना चाहता हूं:

विशिष्ट परिस्थितियां हैं जहां <select> उपयोग नहीं किया जा सकता है और उन्हें ड्रॉपडाउन के साथ 'उत्सर्जित' किया जाना चाहिए।

उदाहरण के लिए यदि आप बूटस्ट्रैप इनपुट समूह बनाना चाहते हैं, जैसे ड्रॉपडाउन वाले बटन (देखें http://getbootstrap.com/compenders/#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 में परिणाम के किसी भी परिवर्तन को करने की आवश्यकता नहीं है ) जो आपको चाहिए।

मुझे आशा है कि यह स्पष्ट है और किसी की मदद कर सकते हैं :-)