时间戳

首页 > 解决方案 > 将 html 选择下拉列表转换为单个按钮导航栏

javascript - 将 html 选择下拉列表转换为单个按钮导航栏

问题描述

我对这种设计的动态菜单导航栏输出有如下要求。

在此处输入图像描述

但现在我变得像下面

在此处输入图像描述

我从下面的数据库中获取动态菜单数据是我的代码

  <select id="dropdownlist" class="form-control" style="color:black">
                        </select>


  $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/CDO/Menu",
                data: "{}",
                success: function (data) {
                    var s = '<option>All History</option>';
                    for (var i = 0; i < data.length; i++) {
                        s += '<option value="' + data[i].Id + '">' + data[i].type + '</option>';
                    }
                    $("#dropdownlist").html(s);
                }
            });

标签： javascriptc#jquerycsstwitter-bootstrap

解决方案

a您可以为内部的按钮下拉菜单创建标签for-loop，然后将生成的 html 添加到您的dropdown-menu.

演示代码：

//just for demo :)
var data = [{
  "Id": "1",
  "type": "abc"
}, {
  "Id": "2",
  "type": "abc2"
}]
$(document).ready(function() {
  var s = "";
  /* $.ajax({
     type: "GET",
     url: "/CDO/Menu",
     data: "{}",
     success: function(data) {*/
  for (var i = 0; i < data.length; i++) {
    //generate a tag here ..
    s += ' <a class="dropdown-item" href="#"> ' + data[i].Id + ' - Type : ' + data[i].type + '</a>'

  }
  $("#dropdownlist").html(s);
  /* }
  });*/


  //on click of a tag inside dropdown
  $(document).on('click', '.dropdown-menu a', function() {
    console.log($(this).text())
    $(".dropdown-toggle").text($(this).text()) //change text of button if needed
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    All History
  </button>
  <div class="dropdown-menu" id="dropdownlist">
    <!--here options will come -->
  </div>
</div>

推荐阅读