11_省市区例子

例子:选择省市

  • 例子图片
    11_省市区例子_第1张图片

  • 代码

    • 模板代码:
      
      <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 = ' + atitle + ''
                          // 向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('')
                          // 获取disc下拉表框
                          disc = $('#disc')
                          // 清空disc下拉框
                          disc.empty().append('')
                          // 变量res数据.,获取每一个元素:[地区id, 地区标题]
                          $.each(res, function (index, item) {
                
                              id = item[0]
                              atitle = item[1]
                              option_str = ' + atitle + ''
                              // 向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('')
                          // 变量res数据.,获取每一个元素:[地区id, 地区标题]
                          $.each(res, function (index, item) {
                
                              id = item[0]
                              atitle = item[1]
                              option_str = ' + atitle + ''
                              // 向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})
      

你可能感兴趣的:(Django,python,django)