blocks|key|216513|text|您需要在<div+class="btn-group+open">中使用添加类open|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|216514|在li中添加class="active"|216515|entityMap^0|4|S|12|4|0|1|2|6|E|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

<p>you need to use add class <code>open</code> in  <code>&lt;div class="btn-group open"&gt;</code></p>

<p>and in <code>li</code> add <code>class="active"</code></p>


blocks|key|434633|text|针对Bootstrap+3.3.4进行了更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434634|这将允许您为每个元素提供不同的显示文本和数据值。它还将在选定内容时保留插入符号。|434635|JS：|434636|$(".dropdown-menu+li+a").click(function(){
++$(this).parents(".dropdown").find('.btn').html($(this).text()+%2B+'+<span+class="caret"></span>');
++$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});|code-block|syntax|javascript|434637|HTML：|434638|<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>|434639|JS+Fiddle+Example|offset|length|434640|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/cmcculloh/xnpf1rr9/^0|0|0|0|0|0|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Updated for Bootstrap 3.3.4:</p>

<p>This will allow you to have different display text and data value for each element. It will also persist the caret on selection.</p>

<p>JS:</p>

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

<p>HTML:</p>

<pre><code>&lt;div class="dropdown"&gt;
  &lt;button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
    Dropdown
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
    &lt;li&gt;&lt;a href="#" data-value="action"&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data-value="another action"&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data-value="something else here"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data-value="separated link"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/cmcculloh/xnpf1rr9/">JS Fiddle Example</a></p>


blocks|key|216601|text|根据@Kyle的回答进一步修改，因为$.text()返回确切的字符串，所以插入符号标记是逐字打印的，而不是作为标记，以防有人想在下拉列表中保持插入符号的完整性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|216602|$(".dropdown-menu+li").click(function(){
++$(this).parents(".btn-group").find('.btn').html(
++$(this).text()%2B"+<span+class=\"caret\"></span>"
++);
});|code-block|syntax|javascript|216603|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Further modified based on answer from @Kyle as 
$.text() returns exact string, so the caret tag is printed literally, than as a markup, just in case someone would like to keep the caret intact in dropdown.</p>

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


blocks|key|434764|text|以下是我的版本，希望能为您节省一些时间:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434765|​|434766|📷|atomic|offset|length|434767|jQuery部件：|434768|$(".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");
});|code-block|syntax|javascript|434769|HTML部件：|434770|<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>++|434771|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3ff403b76832286b62326a168fc76610.jpeg|imageAlt^0|0|0|0|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@$G|15|H|16|1|17]]|A|$]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|19|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|1B|8|@]|9|@]|A|$N|O]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10|11|-4]]]]

<p>Here is my version of this which I hope can save some of your time :)</p>

<p><img src="https://i.stack.imgur.com/xFZBa.jpg" alt="enter image description here">
jQuery PART:</p>

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

<p>HTML PART: </p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="btn-group"&gt;
    &lt;a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"&gt;&lt;span class="selection pull-left"&gt;Select an option &lt;/span&gt; 
      &lt;span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"&gt;&lt;/span&gt;&lt;/a&gt;

     &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
       &lt;li&gt;&lt;a href="#" class="" data-value=1&gt;&lt;p&gt; HER Can you write extra text or &lt;b&gt;HTLM&lt;/b&gt;&lt;/p&gt; &lt;h4&gt; &lt;span class="glyphicon glyphicon-plane"&gt;&lt;/span&gt;  &lt;span&gt; Your Option 1&lt;/span&gt; &lt;/h4&gt;&lt;/a&gt;  &lt;/li&gt;
       &lt;li&gt;&lt;a href="#" class="" data-value=2&gt;&lt;p&gt; HER Can you write extra text or &lt;i&gt;HTLM&lt;/i&gt; or some long long long long long long long long long long text &lt;/p&gt;&lt;h4&gt; &lt;span class="glyphicon glyphicon-briefcase"&gt;&lt;/span&gt; &lt;span&gt;Your Option 2&lt;/span&gt;  &lt;/h4&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#" class="" data-value=3&gt;&lt;p&gt; HER Can you write extra text or &lt;b&gt;HTLM&lt;/b&gt; or some &lt;/p&gt;&lt;h4&gt; &lt;span class="glyphicon glyphicon-heart text-danger"&gt;&lt;/span&gt; &lt;span&gt;Your Option 3&lt;/span&gt;  &lt;/h4&gt;&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;input type="text" id="vl" /&gt;
&lt;/div&gt;  
</code></pre>


blocks|key|216699|text|这似乎是一个很长的问题。我们想要的只是在输入组中实现一个select标记。但是引导程序不能做到这一点：https://github.com/twbs/bootstrap/issues/10486|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|216700|诀窍就是将"btn-group“类添加到父div|216701|html：|216702|<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>|code-block|syntax|javascript|216703|js：|216704|$(".dropdown-menu+li+a").click(function(e){
++++var+selText+=+$(this).text();
++++$(this).parents('.input-group').find('.dropdown-toggle').html(selText%2B'+<span+class="caret"></span>');+++++++
});|216705|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/10486^0|1F|1A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>It seems to be a long issue. All we want is just implement a select tag in the input group. But the bootstrap would not do it: <a href="https://github.com/twbs/bootstrap/issues/10486" rel="nofollow">https://github.com/twbs/bootstrap/issues/10486</a> </p>

<p>the trick is just adding "btn-group" class to the parent div</p>

<p>html:</p>

<pre><code>&lt;div class="input-group"&gt;
  &lt;div class="input-group-btn btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
      Product Name &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;input type="text" class="form-control"&gt;
  &lt;span class="input-group-btn"&gt;
    &lt;button class="btn btn-primary" type="button"&gt;Search&lt;/button&gt;
  &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>js:</p>

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


blocks|key|434860|text|这个可以在同一页面中的多个下拉菜单上运行。此外，我在选中的项目上添加了插入符号：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434861|++++$(".dropdown-menu").on('click',+'li+a',+function(){
++++++++$(this).parent().parent().siblings(".btn:first-child").html($(this).text()%2B'+<span+class="caret"></span>');
++++++++$(this).parent().parent().siblings(".btn:first-child").val($(this).text());
++++});|code-block|syntax|javascript|434862|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This one works on more than one dropdown in the same page.
Furthermore, I added caret on selected item:</p>

<pre><code>    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' &lt;span class="caret"&gt;&lt;/span&gt;');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });
</code></pre>


blocks|key|434893|text|我已经更正了页面上的多个下拉列表的脚本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434894|$(function(){
++++$(".dropdown-menu+li+a").click(function(){
++++++++var+item+=+$(this);
++++++++var+id+=+item.parent().parent().attr("aria-labelledby");

++++++++$("#"%2Bid%2B":first-child").text($(this).text());
++++++++$("#"%2Bid%2B":first-child").val($(this).text());
+++});
});|code-block|syntax|javascript|434895|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have corrected script for multiple dropdowns on the page</p>

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


blocks|key|216830|text|这个单一的jQuery函数将完成您所需的所有工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|216831|$(+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>');
++++++++});
++++});
});|code-block|syntax|javascript|216832|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This single jQuery function will do all you need.</p>

<pre><code>$( 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(' &lt;span class="caret"&gt;&lt;/span&gt;');
        });
    });
});
</code></pre>


blocks|key|434986|text|我不得不将上面显示的一些javascripts放在"document.ready“代码中。否则它们就不起作用了。对许多人来说可能很明显，但对我来说就不是了。因此，如果您正在测试，请查看该选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434987|<script+type="text/javascript">
$(document).ready(function(){
//rest+of+the+javascript+code+here
});
</script>|code-block|syntax|javascript|434988|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had to put some the displayed javascripts above inside the "document.ready" code. Otherwise they didn't work. Probably obvious for many, but not for me. So if you're testing look at that option.</p>

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


blocks|key|435017|text|使用多个下拉菜单的另一种简单方法(Bootstrap+4)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|435018|++++$('.dropdown-item').on('click',++function(){
++++++++var+btnObj+=+$(this).parent().siblings('button');
++++++++$(btnObj).text($(this).text());
++++++++$(btnObj).val($(this).text());
++++});|code-block|syntax|javascript|435019|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another simple way (Bootstrap 4) to work with multiple dropdowns</p>

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


blocks|key|435049|text|为此，我更喜欢使用选择性浮动标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|435050|<div+class="form-floating">
<select+class="form-select"+id="floatingSelect"+aria-label="Floating+label+select+example">
<option+selected>Open+this+select+menu</option>
<option+value="1">One</option>
<option+value="2">Two</option>
<option+value="3">Three</option>
</select>
<label+for="floatingSelect">Works+with+selects</label>
</div>|code-block|syntax|javascript|435051|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I prefer using a selective floating label for that</p>
<pre><code>&lt;div class=&quot;form-floating&quot;&gt;
&lt;select class=&quot;form-select&quot; id=&quot;floatingSelect&quot; aria-label=&quot;Floating label select example&quot;&gt;
&lt;option selected&gt;Open this select menu&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
&lt;/select&gt;
&lt;label for=&quot;floatingSelect&quot;&gt;Works with selects&lt;/label&gt;
&lt;/div&gt;
</code></pre>


blocks|key|216940|text|这是个很老的问题但是..。我想用普通的/普通的JS来做这件事，所以，这是我对这种方式的回答(ECMAScript+2015+(ES6)语法，在Bootstrap5.1上工作)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|216941|let+selectorList+=+Array
++++.from(document.querySelectorAll('dropdown-menu'))
++++.forEach(selector+=>+{
++++++++//Add+an+event+listener+for+displaying+the+selected+dropdown+item
++++++++selector.addEventListener("click",+function()+{
+++++++++++let+selectorButton+=+selector.previousElementSibling+%7C%7C+selector.nextElementSibling;
+++++++++++selectorButton.textContent+=+this.querySelector(":checked").value;
+++++++++++selectorButton.value+=+this.querySelector(':checked').value;
++++++++});
++++});|code-block|syntax|javascript|216942|我通过使用JS+previousElementSibling()+%7C%7C+nextElementSibling()方法来使用JQuery按钮思想，该方法将在<ul+class="dropdown-menu"></ul>元素之前或之后找到按钮元素。|offset|length|style|CODE|216943|entityMap^0|0|0|8|1C|25|V|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>Quite an old question but... I wanted to do it in plain/vanilla JS, so, here is my answer for doing it this way (ECMAScript 2015 (ES6) syntax, working on Bootstrap 5.1) :</p>
<pre><code>let selectorList = Array
    .from(document.querySelectorAll('dropdown-menu'))
    .forEach(selector =&gt; {
        //Add an event listener for displaying the selected dropdown item
        selector.addEventListener(&quot;click&quot;, function() {
           let selectorButton = selector.previousElementSibling || selector.nextElementSibling;
           selectorButton.textContent = this.querySelector(&quot;:checked&quot;).value;
           selectorButton.value = this.querySelector(':checked').value;
        });
    });
</code></pre>
<p>I'm using the JQuery <code>siblings()</code> idea by using the JS <code>previousElementSibling() || nextElementSibling()</code> methods, which will find the button element right before or after the <code>&lt;ul class=&quot;dropdown-menu&quot;&gt;&lt;/ul&gt;</code> element.</p>


<p>I am using the bootstrap Dropdown component in my application like this:</p>

<pre><code>&lt;div class="btn-group"&gt;
    &lt;button class="btn"&gt;Please Select From List&lt;/button&gt;
    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
        &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Item I&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Item II&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Item III&lt;/a&gt;&lt;/li&gt;
       &lt;li class="divider"&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I would like to display the selected item as the btn label. In other words, replace "Please Select From List" with the list item that has been selected("Item I", "Item II", "Item III").</p>


How to Display Selected Item in Bootstrap Button Dropdown Title

jQuery

我在我的应用程序中使用bootstrap下拉组件，如下所示：<div class="btn-group">    <button class="btn">Please Select From List</button>    <button class="btn dropdown-toggle" data-toggle...

问如何在Bootstrap Button下拉标题中显示选定项目
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap Button下拉标题中显示选定项目EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap Button下拉标题中显示选定项目
EN