如何使用 jQuery 将列表项添加到列表中？ [复制]答案

【问题标题】：How can I add list items to a list using jQuery? [duplicate]如何使用 jQuery 将列表项添加到列表中？ [复制]
【发布时间】：2020-02-03 02:33:46
【问题描述】：

尝试使用 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);
        });

}());

【问题讨论】：

是的，.Val() 将设置下拉列表的选定值。看起来您想要设置选项。由于它是作为列表而不是选择实现的，那么stackoverflow.com/questions/1145208/… 可能会对您有所帮助

标签： javascript jquery html twitter-bootstrap

【解决方案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

【讨论】：

由于某种原因它仍然没有为我加载下拉菜单
说不行也没有用。一方面，我们甚至不知道函数是否被正确调用。你的锚在哪里？那么，究竟发生了什么？您是否在浏览器开发工具面板中单步执行了脚本？是否有任何控制台错误？您可以在某个地方创建一个演示，以便我们可以看到您所看到的。
这行不通，至少因为你听的是点击下拉条目，而不是按钮。
已编辑以在加载时初始化项目 - 从您的原始问题中并不完全清楚这是否是所需的行为，但这就是它现在所做的！
感谢您在这里帮助它抛出错误Uncaught TypeError: data.each is not a function

【解决方案2】：

首先，您需要收听 Bootstrap show.bs.dropdown 事件而不是 click，我想这是由 data-toggle 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>

【讨论】：

如果你选择一个值，它会创建一个重复的元素