项目中正好遇到这个问题,需要将几组东南亚国家的地址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
<div class='address'>
<input id="temp" name="temp" type="hidden" />
</div>
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 = ['<option value="">level1</option>']
for (var p in data) {
html.push('<option value="' + p + '">' + p + '</option>')
}
// 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 = ['<option value="">level2</option>']
// 数据类型处理 (每个json数据格式不同)
if (data[level1str] instanceof Array) {
$.each(data[level1str], function (index, value) {
html.push('<option value="' + value + '">' + value + '</option>')
})
} else {
for (var l2 in data[this.value]) {
html.push('<option value="' + l2 + '">' + l2 + '</option>')
}
}
// level2
$select2.empty().append(html.join('')).change(function () {
$temp.val(this.value)
level2str = this.value
$select4.hide()
$select3.show()
var html = ['<option value="">level3</option>']
if (data[level1str][level2str] instanceof Array) {
$.each(data[level1str][level2str], function (index, value) {
html.push('<option value="' + value + '">' + value + '</option>')
})
} else {
for (var l3 in data[level1str][level2str]) {
html.push('<option value="' + l3 + '">' + l3 + '</option>')
}
}
// level3
$select3.empty().append(html.join('')).change(function () {
$temp.val(this.value)
level3str = this.value
$select4.show()
var html = ['<option value="">level4</option>']
if (data[level1str][level2str][level3str] instanceof Array) {
$.each(data[level1str][level2str][level3str], function (index, value) {
html.push('<option value="' + value + '">' + value + '</option>')
})
} else {
for (var l4 in data[level1str][level2str][level3str]) {
html.push('<option value="' + l4 + '">' + l4 + '</option>')
}
}
// 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
}
})
}
})
}
})