[英]How to show drop down select in button in 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>
改变所有人的价值– PvDev
您的问题是否在下拉列表中或将值设置为正确的部分? 也许这会有所帮助。 不知道我是否理解您的问题:
jQuery的
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
var currentBtn = $(this).closest(".btn-group").children("button");
var currentUnit = currentBtn.data("unit");
currentBtn.html(selText);
console.log(currentUnit);
$("."+ currentUnit).text(selText);
});
HTML
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" data-unit="hours" 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>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" data-unit="minutes" 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>
<div class="output">
<button type="button" class="hours btn btn-secondary">am</button>
<button type="button" class="minutes btn btn-secondary">zone</button>
<button type="button" class="seconds btn btn-primary">Set</button>
</div>
https://jsfiddle.net/Rakowu/t982sLuj/1/
我给您的组元素一个数据属性,以确定您单击的单位是什么。 比我选择带有回调的输出元素。 希望对您有所帮助(如果对减少代码量有想法,我很乐意在此进行:D)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.