我正在尝试使用 jQuery 填充选择下拉列表的选项,并且已经部分成功,除了我想添加的额外选项之一。
这是对象:
var test =[
{
"Issue":[
"A producers",
"A producers",
"H producers",
"I producers",
"Limited resource producers",
"Organic producers",
"Producers MM",
"Producers MM"
],
"Activity Type":[
"Career Fairs",
"Career Fairs",
"Outreach",
"Targeted States Programs",
"Partnership Programs",
"Education",
"Career Fairs",
"Targeted States Programs"
],
"Minority Serving Institute":[
"A",
"DD",
"B",
"HSI",
"DD",
"A",
"HSI",
"B"
],
"Leading Office":[
"DAIS",
"RMED",
"RMSD",
"RMSD",
"DAIS",
"RMSD",
"RMED",
"RMED"
],
"Location":[
"AAAAA",
"TEST",
"DFDFFF",
"MIAMI",
"45tw45t ",
"EEEEEEE",
"NEW ORLEANS",
"RTRTRTR"
],
"State":[
"Alaska",
"Alaska",
"Arizona",
"Florida",
"Alaska",
"Kentucky",
"Louisiana",
"Iowa"
]
}
];
填充我使用的选项:
var prev;
for (var key in test) {
var obj = test[key];
for (var w in obj) {
var obj2 = obj[w];
for (var z in obj2) {
var obj3 = obj2[z];
if (prev != obj3) {
prev = obj3;
$('.filter').append($("<option />").val(obj3).text(obj3));
}
}
}}
这是我的问题:如何向下拉选项组中添加“问题”、“事件类型”...等,并在每个选项组下添加其各自的属性?
提前致谢。
最佳答案
只需使用 w
(例如“问题”)添加 <optgroup>
元素并使用该标签将选项添加到正确的组中。
var test = [{
"Issue": ["A producers", "A producers", "H producers", "I producers", "Limited resource producers", "Organic producers", "Producers MM", "Producers MM"],
"Activity Type": ["Career Fairs", "Career Fairs", "Outreach", "Targeted States Programs", "Partnership Programs", "Education", "Career Fairs", "Targeted States Programs"],
"Minority Serving Institute": ["A", "DD", "B", "HSI","DD", "A", "HSI", "B"],
"Leading Office": ["DAIS", "RMED", "RMSD", "RMSD", "DAIS", "RMSD", "RMED", "RMED"],
"Location": ["AAAAA", "TEST", "DFDFFF", "MIAMI", "45tw45t ", "EEEEEEE", "NEW ORLEANS", "RTRTRTR"],
"State": ["Alaska", "Alaska", "Arizona", "Florida", "Alaska", "Kentucky", "Louisiana", "Iowa"]
}];
for (var key in test) {
var obj = test[key];
for (var w in obj) {
var obj2 = obj[w];
$('.filter').append($("<optgroup />").attr({'label': w}));
for (var z in [...new Set(obj2)]) {
var obj3 = obj2[z];
$('.filter optgroup[label="'+w+'"]').append($("<option />").val(obj3).text(obj3));
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="filter"></select>
关于javascript - 使用对象(JavaScript 或 jQuery)填充选择下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36699546/