我已经从 mysql 表中提取数据并立即解码 json_decode
我们有 board、class、subject 的 json 数组,它们是相关的,比如父 -> 子 -> 孙子(板 -> 类 -> 主题)
board_auto_id是classList json数组的第一个class_auto_id是classSubjectList的第一个索引
Note : I have posted partial array of classList and classSubjectList
var boardList =[{"board_auto_id":"1","board_name":"CBSE"},{"board_auto_id":"2","board_name":"ICSE"},{"board_auto_id":"3","board_name":"NCERT"}];
var classList = {"1":[{"class_auto_id":"1","class_name":"VI"},{"class_auto_id":"2","class_name":"VII"},{"class_auto_id":"3","class_name":"VIII"},{"class_auto_id":"4","class_name":"IX"},{"class_auto_id":"5","class_name":"X"},{"class_auto_id":"6","class_name":"XI"},{"class_auto_id":"7","class_name":"XII"}]};
var classSubjectList = {"1":[{"class_auto_id":"1","sub_auto_id":"1","subject_name":"Science"},{"class_auto_id":"1","sub_auto_id":"2","subject_name":"Mathematics"},{"class_auto_id":"1","sub_auto_id":"3","subject_name":"Geography : The Earth Our Habitat "},{"class_auto_id":"1","sub_auto_id":"4","subject_name":"History : Our Pasts - I"},{"class_auto_id":"1","sub_auto_id":"5","subject_name":"Civics : Social And Political Life-I"},{"class_auto_id":"1","sub_auto_id":"86","subject_name":"English : Grammar"},{"class_auto_id":"1","sub_auto_id":"139","subject_name":"English : Writing Skills"},{"class_auto_id":"1","sub_auto_id":"155","subject_name":"English : Reading"},{"class_auto_id":"1","sub_auto_id":"209","subject_name":"संस्कृत : व्याकरण"},{"class_auto_id":"1","sub_auto_id":"220","subject_name":"Computer Science"},{"class_auto_id":"1","sub_auto_id":"235","subject_name":"Literature in English ( NCERT)"},{"class_auto_id":"1","sub_auto_id":"238","subject_name":"हिंदी व्याकरण"},{"class_auto_id":"1","sub_auto_id":"253","subject_name":"English : Vocabulary"}],"2":[{"class_auto_id":"2","sub_auto_id":"6","subject_name":"Science"},{"class_auto_id":"2","sub_auto_id":"7","subject_name":"Mathematics"},{"class_auto_id":"2","sub_auto_id":"8","subject_name":"Geography : Our Environment"},{"class_auto_id":"2","sub_auto_id":"9","subject_name":"History : Our Pasts - II"},{"class_auto_id":"2","sub_auto_id":"10","subject_name":"Civics : Social And Political Life - II"},{"class_auto_id":"2","sub_auto_id":"87","subject_name":"English : Grammar"},{"class_auto_id":"2","sub_auto_id":"140","subject_name":"English : Writing Skills"},{"class_auto_id":"2","sub_auto_id":"154","subject_name":"English : Reading"},{"class_auto_id":"2","sub_auto_id":"210","subject_name":"संस्कृत : व्याकरण"},{"class_auto_id":"2","sub_auto_id":"213","subject_name":"Computer Science"}]}
HTML code
<select name="boardId" id="boardId" class="style1"><option value="">Select Board</option></select>
<select name="classId" id="classId" class="style1"><option value="">Select Class</option></select>
<select name="subjectId" id="subjectId" class="style1"><option value="">Select Subject</option></select>
最佳答案
您可以执行类似的操作将 json 绑定(bind)到下拉列表
<select id="boardList"></select>
$.each(boardList, function (key, value) {
console.log(value.board_auto_id);
appenddata += "<option value = '" + value.board_auto_id + " '>" + value.board_name + " </option>";
});
$('#boardList').html(appenddata);
boardList
下拉列表的 OnChange
您需要从另一个 jsonArray 过滤记录并将其绑定(bind)到下一个 dropDown,与上面代码中提到的相同。
关于javascript - 如何使用 json 数据创建下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29116501/