Question

尝试使用Jquery动态加载下拉列表以引导到下拉列表，下面的代码是否有问题？

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

Answer 2

首先，您需要侦听Bootstrap show.bs.dropdown事件而不是click，我猜这是通过数据切换api阻止的。（请参见this）

然后，您需要遍历数据，并构建相关的HTML以插入到空的-existing-下拉菜单中。

这是我写的一个简单，完善的解决方案（也可以训练自己）。

(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>

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

2 个答案: