javascript - 如何使用 jQuery 将列表项添加到列表中？

Question

尝试使用 Jquery 将下拉列表动态加载到 Bootstrap 下拉列表，知道下面的代码是否有任何问题？

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

}());

Answer 1

您需要为数组中的每个数据元素创建列表项。像这样的东西应该有效:

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

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