需求分析：
本案例需要如下两个方面：
（1）在页面中，以并列的方式放置三个下拉列表框。用户选择第一个下拉列表框时，另外两个下拉列表框的值将随之变化；用户选择第二个下拉列表框时，第三个下拉列表框的值也将随之发生变化。
（2）在三个下拉列表框中，无论选择哪一个下拉列表框，都将各个下拉列表框当前选择的内容显示在页面中。
功能实现：
<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:13px}
h3{padding:0px;margin:8px 0px}
.iframe{width:360px;border:solid 1px #666}
.iframe .title{padding:5px;background-color:#eee}
.iframe .content{padding:8px;font-size:12px}
</style>
<script type="text/javascript">
//将JSON格式的数据保存在变量中
var AreaData = {
"省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}},
"北京":{ val:"01",items:
{"所辖区":{ val:"0101",items:
{"东城区":"010101","西城区":"010102"}
}, "所辖区":{val:"0102",items:
{"密云县":"010201","延庆县":"010202"}}}
},
"天津市":{val:"02",items:
{"所辖区":{ val:"0201",items:
{"和平区":"020101","河东区":"020102"}
}, "所辖区":{val:"0202",items:
{"宁河县":"020201","静海县":"020202"}}}
},
"上海市":{val:"03",items:
{"所辖区":"0301",items:
{"黄埔区":"030101","卢湾区":"030102"}
}, "所辖区":{val:"0202",items:
{"崇明县":"030201"}}}
}
};
$(function() {
//使用变量保存各页面元素
var $s1 = $("#sele1");
var $s2 = $("#sele2");
var $s3 = $("#sele3");
var $t1 = $("#Tip");
//定义显示选中值变量
var $t2 = "";
//设置各个下拉列表框的默认值
var v1 = "01";
var v2 = "0101";
var v3 = "010101";
//设置第一个下拉列表框数据
$.each(AreaData,function(k,v){
appendOptTo($s1,k,v.val,v1);
});
//自定义添加下拉列表框数据函数
function appendOptTo($o,k,v,d){
var $opt = $("<option>").text(k).val(v);
if (v == d) {$opt.attr("selected","true")}
$opt.appendTo($o);
};
//编写第一个下拉列表框内容改变事件并执行该事件
$s1.change(function(){
$s2.html("");
$s3.html("");
if (this.selectedIndex == -1) return;
var s1_curr_val = this.option[this.selectedIndex].value;
var s1_curr_txt = this.option[this.selectedIndex].text;
$.each(AreaData,function(k,v){
if(s1_curr_val == v.val){
if (v.items){
$.each(v.items,function(k,v){
appendOptTo($s2,k,v.val,v2);
});
}
}
});
$t2 = s1_curr_txt;
$t1.html($t2);
$s2.change();
}).change();
//编辑第二个下拉列表框内容改变事件并执行该事件
$s2.change(function(){
$s3.html("");
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
if (this.selectedIndex == -1) return;
var s2_curr_val = this.options[this.selectedIndex].value;
$.each(AreaData,function(k,v){
if (s1_curr_val == v.val){
$.each(v.items,function(k,v){
appendOptTo($s3,k,v,v3);
});
}
});
}
}
});
showChangeItem();
}).change();
//编写第三个下拉列表框内容改变事件
$s3.change(function(){
showChangeItem();
});
//自定义将列表选项框内容显示在页面中的函数
function showChangeItem(){
var s1_curr_txt = $s1[0].option[$s1[0].selectedIndex].text;
var s2_curr_txt = $s2[0].option[$s2[0].selectedIndex].text;
var s3_curr_txt = $s3[0].option[$s3[0].selectedIndex].text;
$t2 = "您所选择的是：" + s1_curr_txt + ">"
+ s2_curr_txt + ">" + s3_curr_txt;
$t1.html($t2);
}
});
</script>
<div class="iframe">
<div class="title">请选择市：
<select id="sele1" name="sele1"></select>
<select id="sele1" name="sele2"></select>
<select id="sele1" name="sele3"></select>
</div>
<div class="content">
<div id="Tip"></div>
</div>
</div>代码分析：
在这个例子中，第一步将所有JSON格式的数据保存在变量AreaData中，用于后续下拉列表框数据的调用。第二步，自定义一个appendOptTo函数，将获取的数据绑定<option>元素的value和text属性值，并通过元素的appendTo方法插入到各个列表框元素内。第三步，通过下列代码，调用自定义的appendOpTo函数，将JSON格式中的“省份”名称插入到ID号为“sele1”的下拉列表框中。
$.each(AreaData,function(k,v){
appendOptTo($s1,k,v.val,v1);
});
上面三个步骤，只是完成了ID号为“sele1”的下拉列表框数据的绑定。接下来需要根据ID号为“sele1”的下拉列表框所选择值，获取对应JSON格式中“城市”和“区县”的数据，并分别绑定ID号为“selel2”和“selel3”的下拉列表元素。具体步骤如下：
1.在ID号为“sele1”的下拉列表元素的“change”事件中，先获取下拉列表框所选中的值，再遍历整个JSON格式数据。在遍历整个JSON格式数据，将该选项中的值与遍历时“省份”名称对应的value值匹配，如果一致，则获取与该名称对应的“items”数据，并将该数据中“城市”名称对应的value值插入到ID号为“sele2”的下拉列表框中。
2.在ID号为“sele2”的下拉列表元素的“change”事件中，以相同的方法筛选JSON格式数据中与所选“省份”和“城市”名称对应的value值一致的“items”数据，并将该数据中“区县”名称对应的value值，通过遍历和调用自定义函数的方式，插入到ID号为“sele3”的下拉列表框中。
3.为了显示各个下拉列表框当前所选中的文本内容，自定义一个showChangeItem函数。该函数的主要功能将各个下拉列表框中所选中的文本内容显示在页面元素中，在ID号为“sele2”和“sele3”下拉列表的“change”事件中，分别调用了该函数，以实现动态显示选中内容的功能。