我正在尝试构建3个从属下拉列表，用户在其中选择第一个下拉列表，系统将仅显示与所选选项相关的数据。 3下拉列表包含
所有数据都从sqlite 3数据库中获取。
直到现在，我才愿意在国家和城市之间创建一个依赖下拉列表，而没有 road
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)
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),
<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>
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')