Javascript 在引导程序下拉列表菜单中显示所选选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33413106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show selected option in bootstrap dropdown list menu
提问by onedevteam.com
I have dropdown list in my bootstrap menu.
我的引导菜单中有下拉列表。
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</li>
I'm trying to get selected option in dropdown as title of dropdown instead of "chose option", as it is now. I have tried several solutions found on this and some other sites, but can't make any of them to work.
我正在尝试将下拉列表中的选定选项作为下拉列表的标题而不是“选择选项”，就像现在一样。我已经尝试了在这个网站和其他一些网站上找到的几种解决方案，但无法使它们中的任何一个工作。
Can someone help with this?
有人可以帮忙吗？
回答by Ganesh Kumar
This should work for you:
这应该适合你：
<div class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
<span id="selected">Chose option</span><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</div>
And the script:
和脚本：
$('.dropdown-menu a').click(function(){
$('#selected').text($(this).text());
});
You need to wrap the text 'Choose option' inside <span>to modify its value on selection.
您需要将文本 'Choose option' 包裹在里面<span>以在选择时修改其值。
Here is the working code: http://liveweave.com/U4BpiH
这是工作代码：http: //liveweave.com/U4BpiH
回答by Nivs
Change your html like :
更改您的 html，如：
<li class="dropdown">
<button id="options" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" >Chose option<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" >Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#" >Option 3</a></li>
<li><a href="#" >Option 4</a></li>
</ul>
</li>
and on javascript side do like this way :
在 javascript 方面这样做：
<script>
$(document).ready(function(){
$(".dropdown-menu li a").click(function(){
$("#options").text($(this).text());
});
});
</script>
回答by user9026942
I had the same problem and here is the solution I found.
我遇到了同样的问题，这是我找到的解决方案。
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" id="options"> <span id="opt">Chose option</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" id="1" href="#" >Option 1</a></li>
<li><a class="dropdown-item" id="2" href="#">Option 2</a></li>
<li><a class="dropdown-item" id="3" href="#" >Option 3</a></li>
<li><a class="dropdown-item" id="4" href="#" >Option 4</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("#1").click(function () {
$("#opt").text($(this).text());
});
$("#2").click(function () {
$("#opt").text($(this).text());
});
$("#3").click(function () {
$("#opt").text($(this).text());
});
$("#4").click(function () {
$("#opt").text($(this).text());
});
});
</script>
回答by Mourad
I found a solution using "onclick"
我找到了一个使用“onclick”的解决方案
onclick="$('#your-main-button-name').html('The text you want to show');"
Hope it helps! :)
希望能帮助到你！:)
回答by Abilash Nadesan
You can go through this simple example.
你可以通过这个简单的例子。
<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>
Add the below script :
添加以下脚本：
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
Also you can try this sample in http://jsbin.com/owuyix/4/edit
您也可以在http://jsbin.com/owuyix/4/edit 中尝试此示例
