title: Populate select drop-down using object (JavaScript or jQuery)
body: <p>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. </p>
  
  <p>This is the object:</p>
  
  <pre><code>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"
        ]
     }
  ];
  </code></pre>
  
  <p>To populate the options I use:</p>
  
  <pre><code>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($("&lt;option /&gt;").val(obj3).text(obj3));
  
    }
  
  }
  
   }}
  </code></pre>
  
  <p>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?</p>
  
  <p><a href="https://jsfiddle.net/emfuentes27/2gfhv4w8/" rel="nofollow">Fiddle here</a></p>
  
  <p>Thanks in advance.</p>