JSON 加載 Select 多級聯動

shiweifu 發布于2019-08-23 12:03 / 2252人閱讀

摘要：項目中正好遇到這個問題，需要將幾組東南亞國家的地址數據解析到下拉列表里面去，原本以為三級聯動的，看下數據發現數據格式并不是一樣的，有兩級的三級的還有四級的，所以我這邊最高定的是四級聯動，可以擴展多級聯動。

項目中正好遇到這個問題，需要將幾組東南亞國家的地址JSON數據解析到下拉列表里面去，原本以為三級聯動的，看下數據發現數據格式并不是一樣的，有兩級的三級的還有四級的，所以我這邊最高定的是四級聯動，可以擴展多級聯動。

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 = [""]
        for (var p in data) {
          html.push("")
        }
        // 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 = [""]
          // 數據類型處理 (每個json數據格式不同)
          if (data[level1str] instanceof Array) {
            $.each(data[level1str], function (index, value) {
              html.push("")
            })
          } else {
            for (var l2 in data[this.value]) {
              html.push("")
            }
          }
          // level2
          $select2.empty().append(html.join("")).change(function () {
            $temp.val(this.value)
            level2str = this.value
            $select4.hide()
            $select3.show()
            var html = [""]
            if (data[level1str][level2str] instanceof Array) {
              $.each(data[level1str][level2str], function (index, value) {
                html.push("")
              })
            } else {
              for (var l3 in data[level1str][level2str]) {
                html.push("")
              }
            }
            // level3
            $select3.empty().append(html.join("")).change(function () {
              $temp.val(this.value)
              level3str = this.value
              $select4.show()
              var html = [""]
              if (data[level1str][level2str][level3str] instanceof Array) {
                $.each(data[level1str][level2str][level3str], function (index, value) {
                  html.push("")
                })
              } else {
                for (var l4 in data[level1str][level2str][level3str]) {
                  html.push("")
                }
              }
              // 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

GPU云服務器云服務器多級聯動省市多級聯動 asp 多級菜單聯動 json 多級讀取

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97900.html

fsLayui聯動下拉框使用(下拉框異步加載數據)

摘要：聯動下拉框可以滿足省市區級聯或者多級級聯異步加載數據操作。演示地址特殊說明聯動下拉框依賴數據字典，必須在后面引入數據字典文件數據字典使用說明聯動下拉框配置聯動下拉框主要在中配置特定的標簽，達到聯動效果。聯動下拉框可以滿足省市區級聯或者多級級聯異步加載數據操作。演示地址：http://fslayui.itcto.cn 特殊說明聯動下拉框依賴數據字典，必須在layui.js 后面引入...

RayKr 2019-08-01 18:17 評論0 收藏0
fsLayui聯動下拉框使用(下拉框異步加載數據)

摘要：聯動下拉框可以滿足省市區級聯或者多級級聯異步加載數據操作。演示地址特殊說明聯動下拉框依賴數據字典，必須在后面引入數據字典文件數據字典使用說明聯動下拉框配置聯動下拉框主要在中配置特定的標簽，達到聯動效果。聯動下拉框可以滿足省市區級聯或者多級級聯異步加載數據操作。演示地址：http://fslayui.itcto.cn 特殊說明聯動下拉框依賴數據字典，必須在layui.js 后面引入...

Rindia 2019-08-21 18:21 評論0 收藏0
如何造一個移動端的聯動選擇器（一）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，需求已經明確。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 MultiPicker ...

Steve_Wang_ 2019-08-02 15:56 評論0 收藏0
如何造一個移動端的聯動選擇器（一）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，需求已經明確。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 MultiPicker ...

andycall 2019-08-30 13:11 評論0 收藏0
如何造一個移動端的聯動選擇器（一）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，需求已經明確。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 MultiPicker ...

tabalt 2019-08-22 10:44 評論0 收藏0