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

Question

इस प्रश्न को स्टैक ओवरफ्लो पर कुछ बार पूछा गया है - हालांकि मैं अभी भी इसके नीचे नहीं पहुंच सकता ... और मेरी क्वेरी खेल में और ड्रॉपडाउन फेंक रही है। तो मेरे पास दो ड्रॉपडाउन और एक खोज है। मैं ड्रॉपडाउन स्थान धारक पाठ को प्रतिस्थापित करने के लिए ड्रॉपडाउन और 'चयनित' से चुनना चाहता हूं। लेकिन मुझे यह भी ध्यान में रखना होगा कि खोज मारने के बाद यह इन चयनित क्षेत्रों के लिए डेटाबेस से पूछेगा।

  <!-- Search box Start --> 
        <form> 
         <div class="well carousel-search hidden-phone"> 
          <div class="btn-group"> 
           <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Country<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
            <li><a href="#">Item I</a></li> 
            <li><a href="#">Item II</a></li> 
            <li><a href="#">Item III</a></li> 
            <li class="divider"></li> 
            <li><a href="#">Other</a></li> 
            </ul> 
         </div> 

          <div class="btn-group"> 
           <a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region/City<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Item I</a></li> 
            <li><a href="#">Item II</a></li> 
            <li><a href="#">Item III</a></li> 
            <li class="divider"></li> 
            <li><a href="#">Other</a></li> 
            </ul> 
          </div> 
          <div class="btn-group"> 
           <button type="submit" class="btn btn-primary">Search</button> 
          </div> 

         </div> 
        </form> 
      <!-- Search box End --> 

Answer 1

आप इस तरह का चयन किया लटकती पाठ सेट कर सकते हैं ..

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

और फिर खोज बटन संभाल चयनित मूल्यों को प्राप्त करने के लिए क्लिक करें: कार्य डेमो

$("#btnSearch").click(function(){ 
    alert($('.btn-select').text()+", "+$('.btn-select2').text()); 
}); 

: http://www.bootply.com/63926

Answer 2

बूटस्ट्रैप 4 बनाम n:

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