javascript - 如何在html中的按钮中显示下拉选择?
问题描述
在这里,我在两个不同的按钮中列出小时和分钟。我可以下拉小时和分钟,但没有在按钮中显示选定的值。
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary"
data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
<button type="button" class="btn btn-secondary">am</button>
<button type="button" class="btn btn-secondary">zone</button>
<button type="button" class="btn btn-primary">Set</button>
</div>
还有我用的 javascript
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
解决方案
你忘了关闭 div
$(".dropdown-menu a").click(function() {
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
</div>
推荐阅读
- mongodb - 使用 MongoDB Compass 连接
- python - 在写入 csv 时添加额外的静态值
- groovy - 如何在 Groovy 中将查询字符串转换为 Map
- python - Python Pandas 插入 DF 不起作用
- php - DiscordJS 和 php 链接
- c - 从 c 链接并调用汇编函数
- oauth - Actions on Google:在 Alpha 中进行测试时,帐户链接是否会持续/刷新?
- ios - 所需条件为假:IsFormatSampleRateAndChannelCountValid(hwFormat)
- python - 在 python 中绘制网络链
- angular6 - 在 Web Progressive App 中模拟发布请求