JSON 로드 Select 다단 계 연동

프로젝트 에서 마침 이 문제 가 발생 했 습 니 다. 몇 개의 동남아 국가의 주소 인 JSON 데 이 터 를 드 롭 다운 목록 에 분석 해 야 합 니 다. 원래 3 급 연동 이 라 고 생각 했 는데 데 이 터 를 보면 데이터 형식 이 똑 같 지 않 고 2 급 3 급 도 있 고 4 급 도 있 습 니 다. 그래서 제 가 가장 높 은 것 은 4 급 연동 이 고 다단 계 연동 을 확장 할 수 있 습 니 다.
JSON 형식

  MY: ['http://116.62.170.10:9001/static/json/en-MY.min.json'], //     
  PH: ['http://116.62.170.10:9001/static/json/en-PH.min.json'], //    
  ID: ['http://116.62.170.10:9001/static/json/in-ID.min.json'], //      
  TH: ['http://116.62.170.10:9001/static/json/th-TH.min.json'], //   
  VN: ['http://116.62.170.10:9001/static/json/vi-VN.min.json'] //   

HTML

JavaScript

$(function(){
  LoadAjaxJsonSelect()
  
  function LoadAjaxJsonSelect () {
    var $temp= $('#temp')
    var selectids = ['select1', 'select2', 'select3', 'select4']
    for (var i = 0; i < selectids.length; i++) {
      var select = document.createElement('select')
      select.id = selectids[i]
      select.name = selectids[i]
      select.className = 'selectpicker'
      $temp.parent().append(select)
    }

    var $select1 = $('#select1')
    var $select2 = $('#select2')
    var $select3 = $('#select3')
    var $select4 = $('#select4')

    $select2.hide()
    $select3.hide()
    $select4.hide()

    $.ajax({
      url: MY,
      type: 'get',
      dataType: 'json',
      data: {},
      success: function (data) {
        console.log(data)
        var html = ['level1']
        for (var p in data) {
          html.push('' + p + '')
        }
        // level1
        var level1str, level2str, level3str
        $select1.empty().append(html.join('')).change(function () {
          $temp.val(this.value)
          level1str = this.value
          $select4.hide()
          $select3.hide()
          $select2.show()
          var html = ['level2']
          //        (  json      )
          if (data[level1str] instanceof Array) {
            $.each(data[level1str], function (index, value) {
              html.push('' + value + '')
            })
          } else {
            for (var l2 in data[this.value]) {
              html.push('' + l2 + '')
            }
          }
          // level2
          $select2.empty().append(html.join('')).change(function () {
            $temp.val(this.value)
            level2str = this.value
            $select4.hide()
            $select3.show()
            var html = ['level3']
            if (data[level1str][level2str] instanceof Array) {
              $.each(data[level1str][level2str], function (index, value) {
                html.push('' + value + '')
              })
            } else {
              for (var l3 in data[level1str][level2str]) {
                html.push('' + l3 + '')
              }
            }
            // level3
            $select3.empty().append(html.join('')).change(function () {
              $temp.val(this.value)
              level3str = this.value
              $select4.show()
              var html = ['level4']
              if (data[level1str][level2str][level3str] instanceof Array) {
                $.each(data[level1str][level2str][level3str], function (index, value) {
                  html.push('' + value + '')
                })
              } else {
                for (var l4 in data[level1str][level2str][level3str]) {
                  html.push('' + l4 + '')
                }
              }
              // level4
              $select4.empty().append(html.join('')).change(function () {
                $temp.val(this.value)
              })
              if ($select4.get(0).options.length <= 1) {
                $select4.hide()
                return false
              }
            })
            if ($select3.get(0).options.length <= 1) {
              $select3.hide()
              return false
            }
          })
          if ($select2.get(0).options.length <= 1) {
            $select2.hide()
            return false
          }
        })
      }
    })
  }
})

Preview