代码之家  ›  专栏  ›  技术社区  ›  PvDev

如何在html中显示下拉选择按钮?

drop-down-menu twitter-bootstrap css html javascript
  •  -1
  • PvDev  · 技术社区  · 6 年前

    这里我用两个不同的按钮列出了小时和分钟。我可以下拉小时和分钟,但不能在按钮中显示所选值。 

            <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);
   });

    通过使用上述js代码,我可以在按钮中显示所选的值,但它会将值更改为所有下拉列表。 这是我得到的截图 screenshot

    2 回复  |  直到 6 年前
        1
  •  1
  •   Rakowu    6 年前

    所有PvDev的it变化值

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

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

        2
  •  1
  •   Horacio Coronel    6 年前

    你忘了关潜水舱 

    $(".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>
    推荐文章
    xajetin  ·  导航不更改滚动上的颜色
    2 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    2 年前
    Bryan Santos  ·  固定表头与引导
    2 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    2 年前
    tym  ·  根据用户偏好显示字段
    2 年前
    Sheryar Khan  ·  如何仅使用html、css、bootstrap、javascript/jquery创建html页面?
    2 年前
    Pavel  ·  当验证DIV可见时,引导网格会移动
    6 年前
    Sam  ·  在标题中嵌入Bootstrap 3导航栏
    6 年前
    Alexander David  ·  折叠卡打开,然后立即再次关闭
    6 年前
    Sandeep Bhardwaj  ·  div的一致行为,与设备分辨率无关
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号