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>

Answer 2

您可以使用optgroup标记。

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

工作小提琴：https://jsfiddle.net/2gfhv4w8/10/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: