前端---二级级联下拉列表的实现

写在前面：本是一前端小白，奈何工作需要，不得不硬着头皮上，但是感觉费劲又慢，光是一个小小的二级级联的东西就弄个半天，愁！特此总结！

前端代码：

<select id="select1" onchange="func1()">
        {% for module in module_info %}
            <option   value = "{{module.module}}">{{module.module}}</option>
        {% endfor %}

    </select>

    <select id="select2"  ></select>
<script>

function func1() {
       $.ajax({
           url: '/get_module_field',
           data: {"mydata": $('#select1').val()},
           dataType: "json",
           success: function (output) {
               var fields = output.fields;
               palceHTML ='';
               for (var i=0;i<fields.length;i++){
                   palceHTML += '<option>'+fields[i]+'</option>';
               }
               $('#select2').html(palceHTML);
           },
           error: function () {
               alert('zxcvzx')
           }
       })
    }
</script>

　　后端代码：

@app.route('/get_module_field', methods=['GET', 'POST'])
def get_module_name():
    module_name = request.args.get('mydata')
    print "module_name", module_name
    for i in range(0, len(ModuleName)):
        module_temp_name = ModuleName[i]['module']
        if module_name == module_temp_name:
            temp_dict = ModuleName[i]
            break
    print temp_dict
    return jsonify(temp_dict)

　　temp_dict：

{'fields': ['keywords', 'ip', 'log_id'], 'module': 'doorkeeper'}