javascript - 使用 JavaScript 对象的动态下拉列表

Question

我想根据这样的 JavaScript 对象创建一个动态下拉列表：

var EXERCISE_OBJ = {
    "title" : {
        "name" : "Exercise_Name",
        "category" : "Pronunciation",
        "type":"Multiple Choice",
        },

    "title2" : {
        "name" : "Exercise_Name2",
        "category" : "Spelling",
        "type":"Crossword",
        },

   "title3" : {
        "name" : "Exercise_Name3",
        "category" : "Spelling",
        "type":"Multiple Choice",
        },

   "title4" : {
        "name" : "Exercise_Name4",
        "category" : "Grammar",
        "type":"Wordsearch",
        },
}

我想要一个列出所有类别的下拉列表和另一个显示每个类别的所有练习标题的下拉列表。我怎样才能输出它？

Answer 1

请试试这个：

Create div with id test. <div id="test"></div>

 var exercise_select = "<select name='exc'>";
 var category_select = "<select name='cate'>";

  $.each(EXERCISE_OBJ, function() {
             var name = this.name;
             var category = this.category;
             exercise_select += "<option value='"+name+"'>"+name+"</option>";
             category_select += "<option value='"+category+"'>"+category+"</option>";
});
   exercise_select += "</select>";       category_select += "</select>";                     
     $("#test").append(exercise_select);        $("#test").append(category_select);