zoukankan      html  css  js  c++  java
  • django之二级联动下拉列表

    编写处理数据的函数

    def get_version(request):
        if request.method == "GET":
            version = request.GET.get("version")
            if version:
                apk = get_apk(version)
                return JsonResponse(apk, safe=False)

    设置URLS

    url(r'^get_version/$', index.get_version, name='get_version'),

    html表单

    <form action="{% url 'index' %}" method="post">
         {% csrf_token %}

    html下拉列表

                    <div class="card-body">
                        <div class="form-group row">
                                <label for="inputName" class="col-md-3 col-form-label">迭代版本:</label>
                            <div class="col-md-9">
                               <select name="version" id="version_name" class="form-control select2 w-100 select2-hidden-accessible" tabindex="-10" aria-hidden="true">
                                   <option disabled="disabled" selected="selected">---迭代版本---</option>
                                   {%for i in version  %}
                                       <option>{{i}}</option>
                                   {% endfor %}
                               </select>
                            </div>
                            </div>
                        <div class="form-group row">
                            <label for="inputName" class="col-md-3 col-form-label">APK版本:</label>
                            <div class="col-md-9">
                               <select name="apk" id="apk_name" class="form-control select2 w-100 select2-hidden-accessible" tabindex="-10" aria-hidden="true">
                                   <option disabled="disabled" selected="selected">---apk---</option>
                               </select>
                            </div>
                        </div>
                    </div>

    html的javascript

        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script type="text/javascript">
            $("#version_name").change(function () {
                $.ajax({
                    url: '/get_version/',
                    data:{"version":$(this).val()},
                    type: 'GET',
                    dataType: 'json',
                    success: function(data){
                        var content = '';
                        content+='<option disabled="disabled" selected="selected">'+"---apk---"+"</option>"
                        $.each(data, function (i, item) {
                            content+="<option>"+item+"</option>"
                            });
                        $('#apk_name').html(content)
                    },
    
                });
            });
    
        </script>
  • 相关阅读:
    Excel.Application使用手册
    VMwareworkstationfull9.0.1894247+汉化补丁(2013.1.22)+有效密钥
    3个月ESET全系列产品试用用户名和密码
    各大安软官方卸载工具
    MDX语法学习filter与iif的使用
    SET XACT_ABORT 用法
    wcf传输List<t>
    存储过程中SELECT与SET对变量赋值
    SQL Server 定时备份数据库(作业)
    数据仓库MDX实际应用
  • 原文地址:https://www.cnblogs.com/ShineLeem/p/13794321.html
Copyright © 2011-2022 走看看