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

Posted 2023-04-12

【中文标题】将 html 选择下拉列表转换为单个按钮导航栏

【英文标题】：Convert html select dropdown to single button Nav bar

【发布时间】：2021-06-18 13:04:21

【问题描述】：

我需要动态菜单导航栏输出，如下所示。

但现在我变得像下面

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

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

【参考方案1】：

您可以为for-loop 内的按钮下拉菜单创建a 标签，然后将生成的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>

【讨论】：

我有下拉更改事件以及如何编写。 @斯瓦蒂

现在我正在更新答案，这将起作用，但仍需检查。 @斯瓦蒂

我只需要更改事件的 id 值，但它提供的整个文本（如下拉菜单）具有文本和值 na。 @斯瓦蒂

将该值放入 data-value="yourid" 并在单击 a 标记时使用 $(this).data("value") 获取它

非常感谢这段代码非常有帮助，并在我的项目中成功实现。 @斯瓦蒂