使用ajax基于从json到html的选择填充下拉列表

Question

您好我想将数据从json文件发送到下拉列表中。有多个下拉列表，每个下拉列表应根据其他下拉列表的选择填充。 而且我的json数据很大。数据来自json，通过ajax调用下拉。 我想要的是每个选择的下拉列表，只应检索特定数据并在下拉列表中显示。但是当我尝试时，我只在一个下拉列表中获取所有数据。

当我在验证器中检查我的json数据时，它是完美的。

以下是我的 HTML代码：

<form method="post" action="Upload"  enctype='multipart/form-data'>
    <select id="onelevel" name="onelevel"></select>
    <br><br>
    <select id="twolevel" name="twolevel"></select> <br><br>
    <select id="threelevel" name="threelevel"></select> <br><br>
    <select id="fourlevel" name="fourlevel"></select> <br><br>
    <select id="fivelevel" name="fivelevel"></select> <br><br>
    <div class="docu" name="docu">          
        <input type="file" name="data"  accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" >
        <button>Upload</button>
    </div>
</form>

Javascript文件数据：

$(document).ready(function() {
    $.ajax({
        type: 'GET',
        url: 'boards.json',
        async:false,

        success: function (data) {                    
            var appenddata;
            var boards=[]
            var board=[]
            var state=[]
            var classes=[]
            var cbse=[]
            var subjects=[]
            var maths=[]
            var chapters=[]

        for(var key in data.boards){
            boards.push(key)
        }

        $.each(boards, function (i,board) {
            var val=JSON.stringify(data.boards[board])
            var div_data="<option value ="+val+">"+board+" </option>"
            $(div_data).appendTo('#onelevel');

        });

        for(var key in data.boards.board){
            board.push(key)
        }
        $.each(board, function (i,classes) {
            var val=JSON.stringify(data.boards.board[classes])
            var div_data1="<option value ="+val+">"+classes+" </option>"
            $(div_data1).appendTo('#twolevel');

        });

        for(var key in data.boards.board.cbse.classes){
            classes.push(key)
        }
        $.each(classes, function (i,subjects) {
            var val=JSON.stringify(data.boards.board.cbse.classes[subjects])
            var div_data2="<option value ="+val+">"+subjects+" </option>"
            $(div_data2).appendTo('#threelevel');

        });





        for(var key in data.boards.board.cbse.classes.class7.subjects){
            subjects.push(key)
        }
        $.each(subjects, function (i,chapters) {
            var val=JSON.stringify(data.boards.board.cbse.classes.class7.subjects[chapters]['chapters'])
            var div_data3="<option value ="+val+">"+chapters+" </option>"
            $(div_data3).appendTo('#fourlevel');

        });




        for(var value in data.boards.board.cbse.classes.class7.subjects.maths.chapters){
            chapters.push(value)
        }
        $.each(chapters, function (i,terms) {
            var val=JSON.stringify(data.boards.board.cbse.classes.class7.subjects.maths.chapters[terms])
            var div_data4="<option value ="+val+">"+val+" </option>"
            $(div_data4).appendTo('#fivelevel');

        });


        for(var key in data.boards.board.cbse.classes.class8.subjects){
            subjects.push(key)
        }
        $.each(subjects, function (i,chapters) {
            var val=JSON.stringify(data.boards.board.cbse.classes.class8.subjects[chapters]['chapters'])
            var div_data6="<option value ="+val+">"+chapters+" </option>"
            $(div_data6).appendTo('#sevenlevel');

        });



        for(var value in data.boards.board.cbse.classes.class8.subjects.maths.chapters){
            chapters.push(value)
        }
        $.each(chapters, function (i,terms) {
            var val=JSON.stringify(data.boards.board.cbse.classes.class8.subjects.maths.chapters[terms])
            var div_data7="<option value ="+val+">"+val+" </option>"
            $(div_data7).appendTo('#eightlevel');

        });







       for(var key in data.boards.board.state){
            state.push(key)
        }
        $.each(state, function (i,classes) {
            var val=JSON.stringify(data.boards.board.state[classes])
            var div_data5="<option value ="+val+">"+classes+" </option>"
            $(div_data5).appendTo('#sixlevel');

        });