在这里,我在两个不同的按钮中列出了小时和分钟。我可以下拉小时和分钟,但没有在按钮中显示选定的值。
<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);
});
最佳答案
it changing value for all – PvDev
您的问题是下拉菜单还是将值设置到正确的部分?也许这会有所帮助。不确定我是否理解你的问题:
查询
$(".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)
关于javascript - 如何在html中的按钮中显示下拉选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50015296/