बूटस्ट्रैप बटन ड्रॉपडाउन शीर्षक में चयनित आइटम कैसे प्रदर्शित करें

Question

मैं इस तरह से अपने आवेदन में बूटस्ट्रैप ड्रॉपडाउन घटक का उपयोग कर रहा हूं:

<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") को बदलें।

Answer 1

जहाँ तक मुझे समझ में आया है कि आपका मुद्दा यह है कि आप बटन को क्लिक करने के लिए लिंक किए गए पाठ के साथ बदलना चाहते हैं, यदि ऐसा है तो आप इसे आज़मा सकते हैं: 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());
   });

});

यहां घटना स्थैतिक माता-पिता $(".dropdown-menu")को सौंप दी जाती है, हालांकि आप घटना को $(document)भी सौंप सकते हैं क्योंकि यह हमेशा उपलब्ध है।

Comments

हाय जय मैंने यूआर नमूना लिंक की कोशिश की, लेकिन यह वहां काम नहीं कर रहा है, इसके अलावा मुझे चयनित मूल्य को बाद में डेटाबेस में पोस्ट करने की आवश्यकता है

— Suffii

@Behseini क्या आप कृपया स्पष्ट कर सकते हैं "चयनित मूल्य को डेटाबेस में पोस्ट करने के लिए" किस मूल्य को पकड़ो?

— जय

यदि आपने db में पोस्ट करना चाहते हैं तो वर्तमान क्लिक किए गए आइटम मान पर मैंने उत्तर अपडेट कर दिया है।

— जय

हाय बेहसीनी, यह "$ (फ़ंक्शन () {});" "$ (दस्तावेज़) .ready (फ़ंक्शन () {}) के बराबर है;" आप अधिक जानकारी यहाँ पा सकते हैं: api.jquery.com/ready

— जय

यह एक छोटा सा लग रहा है कि यह समाधान नहीं है?

— क्रिस्टीन

Answer 2

बूटस्ट्रैप 3.3.4 के लिए अपडेट किया गया:

यह आपको प्रत्येक तत्व के लिए अलग-अलग प्रदर्शन पाठ और डेटा मान रखने की अनुमति देगा। यह चयन पर कार्यवाहक को भी बनाए रखेगा।

जे एस:

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

जेएस फिडेल उदाहरण

Comments

महान काम करता है और मैंने "$ (यह) .parents ("। Btn-group ") चयन के बाद ड्रॉप-डाउन आइटम छिपाने के लिए नीचे के रूप में उन्हें जोड़ा है। खोजें ('चयन')। पाठ ($) (यह) .text ())। end () .children ('.dropdown-toggle') .dropdown ('toggle'); "

— सेंथिल

बूटस्ट्रैप के लिए अद्यतन 3.3.4: माता-पिता ("इनपुट-ग्रुप-बीटीएन") को माता-पिता ("ड्रॉपडाउन") से

— बदलने की जरूरत है

@Cincplug द्वारा सुझाए गए परिवर्तन को जोड़ने के बाद यह स्वीकृत उत्तर होना चाहिए। इसके अलावा, क्या आपको बटन के पाठ पर डाउन कैरेट बनाए रखना चाहिए, आपको .text के बजाय .html का उपयोग करना होगा और स्पैन को समाप्‍त करना होगा $(this).text()।

— मैट जूल

@MattD, काश मैं आपकी टिप्पणी देख पाता इससे पहले कि मैं स्वीकृत उत्तर पर टिप्पणी करता - आप हाजिर हैं।

— पॉल

मेरा सुझाव $(this).parents(".dropdown").find('.btn')है कि jquery के दो बार DOM करने के बजाय एक वैरिएबल में स्टोर करना है।

— एडम

Answer 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 मार्जिन-राइट भी जोड़ा।

Answer 4

यह एकल 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>');
        });
    });
});

Comments

धन्यवाद ! यह उत्तर मुझे बचाने के बाद मेरे 10 मिनट बर्बाद कर अन्य सभी समाधानों को पढ़ रहा है।

— ऐजुद्दीन बैरी

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

Comments

आप ड्रॉपडाउन पर पाठ कैसे बनाते हैं जो उपयोगकर्ता ने अभी चुना है? कहते हैं कि उन्होंने विकल्प 1 का चयन किया, फिर क्लिक किया। विकल्प एक का पाठ इस बिंदु पर ड्रॉपडाउन पर होना चाहिए, आप ऐसा कैसे करते हैं?

— user1835351

जब कोई उपयोगकर्ता एक विकल्प "var selText = $ (यह) .children (" h4 ")। Html ()" "पाठ को बदलता है, का चयन करता है।

— Oskar

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

Comments

मुझे सख्त मोड में "अनट्रेडेड संदर्भ: $ xx परिभाषित नहीं है" मिलता है

— इवान टॉपिक

इवान आपको कुछ भी मिला जो सख्त मोड में काम करता है?

— शून्य-और-

यह एक ही पेज पर कई बूटस्ट्रैप ड्रॉप-डाउन के लिए बढ़िया काम करता है। धन्यवाद!

— मिच

Answer 7

आपको कक्षा openको जोड़ने में उपयोग करने की आवश्यकता है <div class="btn-group open">

और liऐड मेंclass="active"

Answer 8

$ .Text () के रूप में @ केइल से उत्तर के आधार पर आगे संशोधित किया गया है, ताकि कैरट टैग शाब्दिक रूप से प्रिंट हो जाए, मार्कअप के रूप में, अगर कोई व्यक्ति ड्रॉपडाउन में कैरेट को बरकरार रखना चाहेगा।

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

Answer 9

मैंने पृष्ठ पर कई ड्रॉपडाउन के लिए स्क्रिप्ट को सही किया है

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

Answer 10

एक और सरल तरीका (बूटस्ट्रैप 4) कई ड्रॉपडाउन के साथ काम करने के लिए

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

Answer 11

यह एक लंबा मुद्दा लगता है। हम बस इतना चाहते हैं कि इनपुट समूह में कुछ चुनिंदा टैग लागू करें। लेकिन बूटस्ट्रैप ऐसा नहीं करेगा: https://github.com/twbs/bootstrap/issues/10486

ट्रिक सिर्फ पैरेंट डिव में "btn-group" क्लास जोड़ रही है

एचटीएमएल:

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

Answer 12

एक बार जब आप आइटम पर क्लिक करते हैं तो डेटा-चयनित-आइटम = 'सही' जैसी कुछ डेटा विशेषता जोड़ते हैं और इसे फिर से प्राप्त करते हैं।

उसके बाद क्लिक किए गए एलआई तत्व के लिए डेटा-चयनित-आइटम = 'सही' जोड़ने का प्रयास करें

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

इस विशेषता को जोड़ने से पहले आप सूची में मौजूदा डेटा-चयनित-आइटम को हटा दें। आशा है कि यह आपकी मदद करेगा

JQuery में डेटा विशेषता उपयोग के बारे में जानकारी के लिए, jQuery डेटा देखें

Comments

हाय मुरली, उर टिप्पणी के लिए धन्यवाद, मैंने यह कोशिश की, लेकिन अभी भी कोई चीज नहीं मिल रही var test = $('ul.dropdown-menu li').data('selected-item').find('a').text(); $("#nbtn").html(test); है क्या आप कृपया मुझे बता सकते हैं कि मैं क्या गलत कर रहा हूं?

— सुफ़िइ

कृपया अद्यतन उत्तर देखें। मैंने कोड को $ में बदल दिया ('ul.dropdown-menu li [data-select-item] a')। text (); इसे आजमाएँ

— मुरली मुरुगेसन

Answer 13

मुझे ऊपर कुछ डॉक्यूमेंटेड javascripts को "document.ready" कोड के अंदर डालना था। अन्यथा वे काम नहीं करते थे। शायद कई लोगों के लिए स्पष्ट है, लेकिन मेरे लिए नहीं। इसलिए यदि आप परीक्षण कर रहे हैं तो उस विकल्प को देखें।

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

Answer 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 का उपयोग करता हूं ।

$(document).ready(function () {}निम्नलिखित पाठ में पेस्ट करें

जावास्क्रिप्ट:

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

:not(.disabled) अक्षम मेनू आइटम का उपयोग करने की अनुमति न दें