zoukankan      html  css  js  c++  java
  • 前端---二级级联下拉列表的实现

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

    前端代码:

    <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'}

  • 相关阅读:
    textarea聚焦的多种写法
    vue.js入门
    全选,反选
    jquery列表,点击反应
    SqlServer中offset..fetch 的使用问题
    复习Spring第四课---Spring对国际化的支持
    SqlServer的order by问题
    设计模式之---代理模式
    解决SpringMVC重复提交的问题
    Java知识复习(三)
  • 原文地址:https://www.cnblogs.com/pannyvan/p/7205386.html
Copyright © 2011-2022 走看看