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

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

前端代码：

<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：

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d7c9a7; background-color: rgba(142, 53, 39, 0.85) }
span.s1 { }
{'fields': ['keywords', 'ip', 'log_id'], 'module': 'doorkeeper'}