<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示：四级联动</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var fourSelectData = {
"省份": {val: "", items: {
"城市": {val: "", items: {
"区县": {val: "", items: {
"乡镇": ""
}}
}}
}},
"江苏": {val: "02", items: {
"南京": {val: "0201", items: {
"玄武区": {val: "020101", items: {
"玄武区1": "02010101",
"玄武区2": "02010102",
"玄武区3": "02010103",
"玄武区4": "02010104",
}}
}},
"盐城": {val: "0202", items: {
"阜宁县": {val: "020201", items: {
"阜城镇": "02020101",
"三灶镇": "02020102",
"陈良镇": "02020103",
"郭墅镇": "02020103",
}},
"滨海县": {val: "020202", items: {
"通榆镇": "02020201",
"蔡桥镇": "02020202"
}}
}}
}},
"北京": {val: "01", items: {
"东城区": {val: "0101", items: {
"bj-01-01县": {val: "010101", items: {}}
}},
"西城区": {val: "0102", items: {
"bj-02-01县": {val: "010201", items: {}},
"bj-02-02县": {val: "010202", items: {}}
}}
}},
"广州": {val: "03", items: {}}
};
/*
通用四级联动说明
参数配置如下，配置select的四个ID和默认值就行，无默认值填写为null，v1-v4可省略
var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
s4:'Select3',
v1:null,
v2:null,
v3:null,
v4:null
};
*/
var defaults = {
s1: 'Select1',
s2: 'Select2',
s3: 'Select3',
s4: 'Select4',
v1: "02",
v2: "0202",
v3: "020202",
v4: "02020202"
};
$(function() {
fourSelect(defaults);
});
function fourSelect(config) {
var $s1 = $("#" + config.s1);
var $s2 = $("#" + config.s2);
var $s3 = $("#" + config.s3);
var $s4 = $("#" + config.s4);
var v1 = config.v1 ? config.v1 : null;
var v2 = config.v2 ? config.v2 : null;
var v3 = config.v3 ? config.v3 : null;
var v4 = config.v4 ? config.v4 : null;
$.each(fourSelectData, function(k, v) {
appendOptionTo($s1, k, v.val, v1);
});
$s1.change(function() {
$s2.html("");
if (this.selectedIndex == -1)
return;
var s1_curr_val = this.options[this.selectedIndex].value;
$.each(fourSelectData, function(k, v) {
if (s1_curr_val == v.val) {
if (v.items) {
$.each(v.items, function(k, v) {
appendOptionTo($s2, k, v.val, v2);
});
}
}
});
if ($s2[0].options.length == 0) {
appendOptionTo($s2, "...", "", v2);
}
$s2.change();
}).change();
$s2.change(function() {
$s3.html("");
if (this.selectedIndex == -1)
return;
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
var s2_curr_val = this.options[this.selectedIndex].value;
$.each(fourSelectData, function(k, v) {
if (s1_curr_val == v.val) {
if (v.items) {
$.each(v.items, function(k, v) {
if (s2_curr_val == v.val) {
if (v.items) {
$.each(v.items, function(k, v) {
appendOptionTo($s3, k, v.val, v3);
});
}
}
});
}
}
});
if ($s3[0].options.length == 0) {
appendOptionTo($s3, "...", "", v3);
}
$s3.change();
}).change();
$s3.change(function() {
$s4.html("");
if (this.selectedIndex == -1)
return;
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
var s2_curr_val = $s2[0].options[$s2[0].selectedIndex].value;
var s3_curr_val = this.options[this.selectedIndex].value;
$.each(fourSelectData, function(k, v) {
if (s1_curr_val == v.val) {
if (v.items) {
$.each(v.items, function(k, v) {
if (s2_curr_val == v.val) {
if (v.items) {
$.each(v.items, function(k, v) {
if (s3_curr_val == v.val) {
if (v.items) {
$.each(v.items, function(k, v) {
appendOptionTo($s4, k, v, v4);
});
}
}
});
}
}
});
}
}
});
if ($s4[0].options.length == 0) {
appendOptionTo($s4, "..
