在引导程序下拉列表菜单中显示所选选项
Show selected option in bootstrap dropdown list 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>
我正在尝试将下拉列表中的选定选项作为下拉列表的标题,而不是现在的"选定选项"。我已经尝试了在这个网站和其他一些网站上找到的几种解决方案,但都无法实现。
有人能帮忙吗?
这应该适用于您:
<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>
脚本:
$('.dropdown-menu a').click(function(){
$('#selected').text($(this).text());
});
您需要将文本"Choose option"包装在<span>
中,以在选择时修改其值。
以下是工作代码:http://liveweave.com/U4BpiH
更改你的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>
在javascript方面,这样做:
<script>
$(document).ready(function(){
$(".dropdown-menu li a").click(function(){
$("#options").text($(this).text());
});
});
</script>
在多次下拉的情况下,这是有效的,不使用任何ID
<div class="d-flex gap-3 col-md-3">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<script>
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
</script>
我遇到了同样的问题,下面是我找到的解决方案。
<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>
我发现了一个使用"onclick"的解决方案
onclick="$('#your-main-button-name').html('The text you want to show');"
希望它能有所帮助!:)
您可以浏览这个简单的示例。
<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>
添加以下脚本:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
你也可以在http://jsbin.com/owuyix/4/edit
相关文章:
- 根据所选选项显示/隐藏不同的表单
- HTML 表单字段根据从下拉列表中选择的选项显示/隐藏
- 根据所选选项显示文本
- 禁用浏览器自动选项(显示输入元素中保存的单词)
- 基于所选选项显示asp:TextBox的JavaScript
- 更改选项显示当前时间
- 根据下拉列表中的选定选项显示详细信息
- 如何根据选中的选项显示文本数组
- 根据单独选择的选项显示 HTML 选项
- jQuery不能基于选择选项显示/隐藏元素
- Javascript cookie 用于保存用户首选项并使用共享首选项显示内容
- 根据选择框中的选项显示单选按钮
- 如何在asp.net web应用程序中使用javascript根据下拉列表中选择的选项显示不同的输入类型
- 下拉选项应根据上一个选项显示
- jQuery:根据所选选项显示/隐藏元素
- 选择选项显示/隐藏IE9问题
- 为'
- 我的下拉选项显示按钮时,它不应该'
- 根据选择的选项显示一个Div(带有计算值)——Angular
- 根据带有自定义值属性的选择选项显示图像