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