javascript - 使用对象(JavaScript 或 jQuery)填充选择下拉列表

Question

我正在尝试使用 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));

  }

}

 }}

这是我的问题:如何向下拉选项组中添加“问题”、“事件类型”...等，并在每个选项组下添加其各自的属性？

Fiddle here

提前致谢。

Answer 1

只需使用 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>