title: how to create 3 dependent dropdown list using django and ajax
body: <p>i am trying to build a 3 dependent dropdownlist where the user select the first dropdownlist and the system will open display just the data related to the selected option.
   the 3 dropdown list contains </p>
  
  <ul>
  <li>conuntries</li>
  <li>citys</li>
  <li>roads</li>
  </ul>
  
  <p>where all the data are fetched from the sqlite 3 database .</p>
  
  <p>until now i was abel to create a dependent dropdownlist only between the <strong>country</strong> and <strong>city</strong> without the <strong>road</strong> </p>
  
  <h1>models.py</h1>
  
  <pre><code>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)
  </code></pre>
  
  <h1>urls.py</h1>
  
  <pre><code>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),
  </code></pre>
  
  <h1>home2.html</h1>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(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 &gt;= 0; i--) {
                                  $("#selectcities").append('&lt;option&gt;'+ result[i].name +'&lt;/option&gt;');
                              };
  
  
                           });
                   });
  
  
                   $('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 &gt;= 0; i--) {
                                  $("#selectroads").append('&lt;option&gt;'+ result[i].name +'&lt;/option&gt;');
                              };
  
  
                           });
                   });
  
  
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;select name="selectcountries" id="selectcountries"&gt;
          {% for item in countries %}
              &lt;option val="{{ item.name }}"&gt; {{ item.name }} &lt;/option&gt;    
          {% endfor %}
          &lt;/select&gt;   
  
  
          &lt;select name ="selectcities" id="selectcities"&gt;
  
  
          &lt;/select&gt;       
  
          &lt;select name ="selectroads" id="selectroads"&gt;
  
  
          &lt;/select&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>views.py</h1>
  
  <pre><code>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')
  </code></pre>