javascript - 如何使用 jQuery 将列表项添加到列表中?
问题描述
尝试使用 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);
});
}());
解决方案
您需要为数组中的每个数据元素创建列表项。像这样的东西应该工作:
$(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);
});
});
推荐阅读
- javascript - 获取网页的 URL,不包括组件的 URL
- node.js - Nodejs后端如何摆脱html标签
- json - 在 .NET Core 3 中序列化 Manatee.Json
- android - 检测 webview 中的状态变化
- sql - 查看尝试连接到另一个数据库
- python - UpdateView formset 数据中的 Django inlineformset_factory 未更新
- c++ - 如何在 C++ 中使用 python 类?
- c - 设置 Linux-C-DB2 环境
- java - 将对象转换为领域中的列表 [对象] 作为迁移(如何将列表 [对象] 替换为领域中的对象字段?)
- android - org.xml.sax.SAXParseException;行号:1;列号:1;序言中不能有内容。还没有配置的错误