使用对象（JavaScript或jQuery）填充选择下拉列表

Question

I'm trying to populate the options of a select drop-down using jQuery, and I've been partially successful, except for one of extra that I would like to add to it.

This is the object:

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"
      ]
   }
];

To populate the options I use:

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));

  }

}

 }}

This is my question: How can I add to my drop down options groups adding "Issues", "Activity Type"... etc.,and under each option group its respective properties?

Fiddle here

Thanks in advance.

Answer 1

Just use w (eg 'Issues') to add a <optgroup> element and use that label to add the options to the correct group.

 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> 

Answer 2

You can use the optgroup tag.

const filterElement = $('.filter')[0]; // just for me to get the DOM element
test.forEach(function(list) { // loop through the array
  for (let key in list) {
    let optGroup = document.createElement('optgroup');
    optGroup.setAttribute('label', key); // set the label so that it displays properly
    list[key].forEach(function(value) {
      let option = document.createElement('option');
      option.textContent = value;
      optGroup.appendChild(option); // add option to group
    });

    filterElement.appendChild(optGroup); // add group to select box
  }
});

Working fiddle: https://jsfiddle.net/2gfhv4w8/10/

 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"] }]; const filterElement = document.getElementById('filter'); test.forEach(function(list) { for (let key in list) { let optGroup = document.createElement('optgroup'); optGroup.setAttribute('label', key); list[key].forEach(function(value) { let option = document.createElement('option'); option.textContent = value; optGroup.appendChild(option); // add option to group }); filterElement.appendChild(optGroup); // add group to select box } }); 

 <select id="filter"></select> 

Answer 3

 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; cat = ''; result = ''; for (var key in test) { var obj = test[key]; for (var w in obj) { var obj2 = obj[w]; if (!cat) { result+='<optgroup label="' + w +'">'; cat = w; } if ( cat != w) { result+='</optgroup><optgroup label="' + w +'">'; cat = w; } for (var z in obj2) { var obj3 = obj2[z]; if (prev != obj3) { prev = obj3; result+='<option value="'+obj3+'">'+obj3+'</option>'; } } } } result+='</optgroup>'; $('.filter').append(result); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <select class="filter"> </select>