How can I add list items to a list using jQuery?

Question

Trying to load dropdown dynamically to bootstrap dropdown using Jquery , Any idea if there is any issue with below code ?

main.html

<div class="form-group">
    <div class="row">    
        <div class="col-md-6" class="form-control">
            <div class="btn-group dropright">
                <button type="button" class="btn btn-secondary btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"  aria-expanded="false">
                   Select Clients
                </button>
            <div class="dropdown-menu">
                <ul class="dropdown-menu" id="projectSelectorDropdown"></ul>
            </div>
        </div>
    </div>
</div>

main.js

(function dropdDOwndata(){

        var data = [{
            id: 1, 
            name: "Voyage"
        },
        {
            id: 2, 
            name: "SDK"
        },
        ]
        $('.dropdown-menu a').click(function () {           
           $('#projectSelectorDropdown').val(data);
        });

}());

Yes, .Val() will set the selected value of the drop-down. It looks like you want to set the options. Since it's implemented as a list rather than a select then maybe https://stackoverflow.com/questions/1145208/how-to-add-li-in-an-existing-ul would help you — ADyson, Oct 04 '19 at 18:48

Tyler Schroeder · Answer 1 · 2019-10-06T17:13:38.930

2

You need to create list items for each data element in your array. Something like this should work:

$(function() {
  var data = [
    {
      id: 1,
      name: "Voyage"
    },
    {
      id: 2,
      name: "SDK"
    }
  ];

  $("#projectSelectorDropdown")
    .empty()
    .append(
      data.map(d => `<li><a data-id=${d.id} href='#'>${d.name}</a></li>`)
    );

  $(".dropdown-menu a").click(function(e) {
    console.log(e);
  });
});

See: https://codepen.io/tyschroed/pen/WNNNaoo?editors=0010

edited Oct 06 '19 at 17:13

answered Oct 04 '19 at 18:54

Tyler Schroeder

730
3
6
14

for some reason its still not loading dropdown for me – aftab Oct 04 '19 at 19:15
1

It's not helpful to say that it doesn't work. For one thing, we don't even know if the function is being called correctly. Where is your anchor? Then, what's actually happening? Have you stepped through the script in your browser dev tools panel? Are there any console errors? You might create a demo somewhere so we can see what you see. – isherwood Oct 04 '19 at 19:20
This won't work, at least because you listen to click on a dropdown entry, not on the button. – el-teedee Oct 04 '19 at 19:21
Edited to initialize items on load - it's not entirely clear from your original question if that's the desired behavior or not, but that's what it does now! – Tyler Schroeder Oct 04 '19 at 19:34
1

Thank you for helping here its throwing an error `Uncaught TypeError: data.each is not a function` – aftab Oct 04 '19 at 19:49

score 0 · Answer 2 · answered Oct 04 '19 at 19:21

First, you need to listen to Bootstrap show.bs.dropdown event rather than click, which is prevented I suppose by data-toggle api. (See this)

Then, you need to loop over you data, and build a relevant HTML to insert into the empty -existing- dropdown menu.

Here a simple, perfectable, solution I wrote (to also train myself).

(function dropdDOwndata(document) {

  var data = [{
      id: 1,
      name: "Voyage"
    },
    {
      id: 2,
      name: "SDK"
    },
  ]
  $(document).on('show.bs.dropdown', function(event) {
    let $dropdown = $(event.target).find('.dropdown-menu');
    for (var i = 0; i < data.length; i++) {
      let $link = $('<A>').text(data[i].name + ' (' + data[i].id + ')');
      let $li = $('<LI>').append($link);
      $dropdown.append($li);
    };
  });

}(document));

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <div class="row">
    <div class="col-md-6" class="form-control">
      <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Select Clients
      </button>
        <div class="dropdown-menu">
          <ul class="dropdown-menu" id="projectSelectorDropdown"></ul>
        </div>
      </div>
    </div>
  </div>
</div>

if you select a value its creating a duplicate elements – aftab Oct 04 '19 at 19:30 — aftab, Oct 04 '19 at 19:30

How can I add list items to a list using jQuery?

2 Answers2