Convert html select dropdown to single button Nav bar

Question

I have requirement for dynamic menu Navbar output like below with this design.

But now i am getting like below

I am getting dynamic menu data from database below is my code

  


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

user_10606400 · Answer

You can create a tags for button dropdown inside for-loop and then add that generated html inside your dropdown-menu.

Demo Code :

//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 += '  ' + data[i].Id + ' - Type : ' + data[i].type + ''

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

Convert html select dropdown to single button Nav bar

1 Answers