如何使用django和ajax创建3个依赖下拉列表

时间:2019-02-16 13:53:34

标签: jquery ajax django dropdown

我正在尝试构建3个从属下拉列表,用户在其中选择第一个下拉列表,系统将仅显示与所选选项相关的数据。  3下拉列表包含

  • 竞赛项
  • 城市
  • 道路

所有数据都从sqlite 3数据库中获取。

直到现在,我才愿意在国家城市之间创建一个依赖下拉列表,而没有 road

models.py

from django.db import models


    class country(models.Model):
        name = models.CharField(max_length=100)

        def __str__(self):
            return str(self.name)

    class city(models.Model):
        name = models.CharField(max_length=100)
        MouhafazatID = models.ForeignKey(country,on_delete=models.CASCADE)


        def __str__(self):
            # return'id : {0} MouhafazatID :{1} Name :{2}'.format(self.id,self.MouhafazatID,self.name)
            return str(self.name)

    class road(models.Model):
        Vil = models.CharField(max_length=100)
        CazaID= models.ForeignKey(city,on_delete = models.SET_NULL, null=True)
        MouhafazaID= models.ForeignKey(country,on_delete = models.SET_NULL,null=True)

        def __str__(self):
            return str(self.Vil)

urls.py

from django.contrib import admin
from django.urls import path, include
from.views import *
# from . import views

urlpatterns = [
    path('admin/', admin.site.urls),

    path('', home2),
    path('getdetails/', getdetails),
    path('getdetails2/', getdetails2),

home2.html

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
        <script>
            $(document).ready(function(){
                 $('select#selectcountries').change(function () {
                     var optionSelected = $(this).find("option:selected");
                     var valueSelected  = optionSelected.val();
                     var country_name   = optionSelected.text();


                     data = {
                        'cnt' : country_name 
                     };
                     ajax('/getdetails',data,function(result){

                            console.log(result);
                            $("#selectcities option").remove();
                            for (var i = result.length - 1; i >= 0; i--) {
                                $("#selectcities").append('<option>'+ result[i].name +'</option>');
                            };


                         });
                 });


                 $('select#selectcities').change(function () {
                     var optionSelected = $(this).find("option:selected");
                     var valueSelected  = optionSelected.val();
                     var city_name   = optionSelected.text();


                     data = {
                        'cty' : city_name 
                     };
                     ajax('/getdetails2',data,function(result){

                            console.log(result);
                            $("#selectroads option").remove();
                            for (var i = result.length - 1; i >= 0; i--) {
                                $("#selectroads").append('<option>'+ result[i].name +'</option>');
                            };


                         });
                 });


            });
        </script>
    </head>

    <body>
        <select name="selectcountries" id="selectcountries">
        {% for item in countries %}
            <option val="{{ item.name }}"> {{ item.name }} </option>    
        {% endfor %}
        </select>   


        <select name ="selectcities" id="selectcities">


        </select>       

        <select name ="selectroads" id="selectroads">


        </select>



    </body>
</html>

views.py

from django.shortcuts import render
from django.http import HttpResponse
from testapp.models import *
import json as simplejson

def home2(request):
    countries = country.objects.all()
    print(countries)
    return render(request, 'home2.html',{'countries': countries})



def getdetails(request):

    country_name = request.GET['cnt']
    print ("ajax country_name ", country_name)

    result_set = []
    all_cities = []

    answer = str(country_name[1:-1])
    selected_country = country.objects.get(name=answer)
    print ("selected country name ", selected_country)

    all_cities = selected_country.city_set.all()
    for city in all_cities:
        print ("city name", city.name)
        result_set.append({'name': city.name})

    return HttpResponse(simplejson.dumps(result_set),content_type='application/json')

def getdetails2(request):

    #country_name = request.POST['country_name']
    city_name = request.GET['cty']
    print ("ajax city_name ", city_name)

    result_set = []
    all_roads = []

    answer = str(city_name[1:-1])
    selected_city = city.objects.get(Vil=answer)
    print ("selected city name ", selected_city)

    all_roads = selected_city.road_set.all()
    for road in all_roads:
        print ("road name", road.Vil)
        result_set.append({'name': road.Vil})

    return HttpResponse(simplejson.dumps(result_set),content_type='application/json')

0 个答案:

没有答案