例子：选择省市
-
例子图片
-
代码
- 模板代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示省市区</title> <script src="/static/js/jquery-1.12.4.min.js"></script> <script> $(function () { // 发送一个ajax请求,/prov 获取所有省级地区的信息 // 获取信息,使用get //涉及到信息修改,使用post $.get('/prov', function (data) { // 回调函数 // 获取返回的jsion数据 res = data.data // 获取prov下拉表框 prov = $('#prov') // 变量res数据.,获取每一个元素:[地区id, 地区标题] $.each(res, function (index, item) { id = item[0] atitle = item[1] option_str = '<option value=' + id + ' >' + atitle + '</option>' // 向prov下拉列表框中追加元素 prov.append(option_str) }) }) // 绑定prov下拉列表框的change事情,获取省下面的市信息 $('#prov').change(function () { // 发送一个ajax请求,/city 获取所有市级地区的信息 // 获取信息,使用get //涉及到信息修改,使用post // 获取省点击id prov_id = $(this).val() $.get('/city'+prov_id, function (data) { // 回调函数 // 获取返回的jsion数据 res = data.data // 获取city下拉表框 city = $('#city') // 清空city下拉框 city.empty().append('<option >----请选择市----</option>') // 获取disc下拉表框 disc = $('#disc') // 清空disc下拉框 disc.empty().append('<option >----请选择区----</option>') // 变量res数据.,获取每一个元素:[地区id, 地区标题] $.each(res, function (index, item) { id = item[0] atitle = item[1] option_str = '<option value=' + id + ' >' + atitle + '</option>' // 向city下拉列表框中追加元素 city.append(option_str) }) }) }) // 绑定city下拉列表框的change事情,获取省下面的市信息 $('#city').change(function () { // 发送一个ajax请求,/city 获取所有市级地区的信息 // 获取信息,使用get //涉及到信息修改,使用post // 获取省点击id city_id = $(this).val() $.get('/city'+city_id, function (data) { // 回调函数 // 获取返回的jsion数据 res = data.data // 获取disc下拉表框 disc = $('#disc') // 清空disc下拉框 disc.empty().append('<option >----请选择区----</option>') // 变量res数据.,获取每一个元素:[地区id, 地区标题] $.each(res, function (index, item) { id = item[0] atitle = item[1] option_str = '<option value=' + id + ' >' + atitle + '</option>' // 向disc下拉列表框中追加元素 disc.append(option_str) }) }) }) }) </script> </head> <body> <select id="prov" > <option >----请选择省----</option> </select> <select id="city" > <option >----请选择市----</option> </select> <select id="disc" > <option >----请选择区----</option> </select> </body> </html> - url代码
re_path(r'^areas$', views.areas), re_path(r'^prov$', views.prov), re_path('^city(\d+)$', views.city), - 视图代码
def areas(request): '''省市县选中案例''' return render(request, 'booktest/areas.html') def prov(request): '''获取所有省级地区的信息''' # 1. 获取所有省级地区的信息 areas = AreaInfo.objects.filter(aParent__isnull=True) # 2. 变量areas并拼接出json数据: id atitle areas_list = list() for area in areas: areas_list.append((area.id, area.atitle)) # 3. 返回数据 return JsonResponse({'data': areas_list}) def city(request, pid): '''获取pid的下级地区的信息''' # 1. 获取pid对应地区的下级地区的信息 areas = AreaInfo.objects.filter(aParent__id=pid) # 2. 变量areas并拼接出json数据: id atitle areas_list = list() for area in areas: areas_list.append((area.id, area.atitle)) # 3. 返回数据 return JsonResponse({'data': areas_list})
- 模板代码：
3595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
