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>