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>

通过使用上面的js代码，我可以在按钮中显示所选的值，但它会将值更改为所有下拉列表。

---

这是我得到的截图

你忘了关闭div

$（“.下拉菜单a”）。单击（函数（）{
var selText=$（this.text（）；
$（this）.parents（'.btn group'）.find（'.btn secondary'）.html（selText）；
});

小时
:
闵

它改变了所有人的价值——PvDev

您的问题是下拉列表还是将值设置到正确的部分？也许这会有帮助。不确定我是否理解您的问题：

Jquery

Html


小时
:
闵
是
区
设置


我给了你的组元素一个数据属性，以确定你点击的是什么类型的单位。然后用回调函数选择输出元素。
希望能有所帮助
（如果有关于如何减少我的代码的想法，我很乐意在这里讨论：D）
您忘记了第一个
btn组的结束标记
，因此选择了两个
.btn次要
。打字错误question@CertainPerformance我已经编辑了我的问题。您能检查一下吗？您仍然没有关闭
div
，因此它当然不起作用。看看整理过的代码：@CertainPerformance它改变了allYes的值，这是因为第一个
div
没有关闭-就像我说的，看看整理过的代码。关闭你的分区。像这样的打字问题是离题的，不应该回答。它会改变你的值all@while给予div，它改变了设计。设计应该像上面的一样，但这是你想要的吗？
  $(".dropdown-menu a").click(function(){
    var selText = $(this).text();
  $(this).parents('.btn-group').find('.btn-secondary').html(selText);
   });

$(".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);
   });

<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>