Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-09-03

Blog:?http://shaoyun.cnblogs.com/

前面的文章?通用三級聯動下拉列表?我寫了一個三級聯動的函數，留言里有網友說需要四級，于是便寫了一個。

??1?<script?type="text/javascript"?src="../jquery-1.3.2.min.js"></script>
??2?<script?type="text/javascript">
??3?var?fourSelectData={
??4?????"省份":{val:"",items:{
??5?????????"城市":{val:"",items:{
??6?????????????"區縣":{val:"",items:{
??7?????????????????"鄉鎮":""
??8?????????????}}
??9?????????}}
?10?????}},
?11?????"北京":{val:"01",items:{
?12?????????"bj-01":{val:"0101",items:{
?13?????????????"bj-01-01縣":{val:"010101",items:{}}
?14?????????}},
?15?????????"bj-02":{val:"0102",items:{
?16?????????????"bj-02-01縣":{val:"010201",items:{}},
?17?????????????"bj-02-02縣":{val:"010202",items:{}}
?18?????????}}
?19?????}},
?20?????"陜西":{val:"02",items:{
?21?????????"sx01市":{val:"0201",items:{
?22?????????????"sx-01-01縣":{val:"020101",items:{}}
?23?????????}},
?24?????????"sx02市":{val:"0202",items:{
?25?????????????"sx-02-01縣":{val:"020201",items:{
?26?????????????????"sx-02-01-01鎮":"02020101",
?27?????????????????"sx-02-01-02鎮":"02020102"
?28?????????????}},
?29?????????????"sx-02-02縣":{val:"020202",items:{
?30?????????????????"sx-02-02-01鎮":"02020201",
?31?????????????????"sx-02-02-02鎮":"02020202"
?32?????????????}}
?33?????????}}
?34?????}},
?35?????"廣州":{val:"03",items:{}}
?36?};
?37?/*
?38?通用四級聯動說明
?39?參數配置如下，配置select的四個ID和默認值就行，無默認值填寫為null，v1-v4可省略
?40?var?defaults?=?{
?41?????s1:'Select1',
?42?????s2:'Select2',
?43?????s3:'Select3',
?44?????s4:'Select3',
?45?????v1:null,
?46?????v2:null,
?47?????v3:null,
?48?????v4:null
?49?};
?50?*/
?51?var?defaults?=?{
?52?????s1:'Select1',
?53?????s2:'Select2',
?54?????s3:'Select3',
?55?????s4:'Select4',
?56?????v1:"02",
?57?????v2:"0202",
?58?????v3:"020202",
?59?????v4:"02020202"
?60?};
?61?$(function(){
?62?????fourSelect(defaults);
?63?});
?64?function?fourSelect(config){
?65?????var?$s1=$("#"+config.s1);
?66?????var?$s2=$("#"+config.s2);
?67?????var?$s3=$("#"+config.s3);
?68?????var?$s4=$("#"+config.s4);
?69?????var?v1=config.v1?config.v1:null;
?70?????var?v2=config.v2?config.v2:null;
?71?????var?v3=config.v3?config.v3:null;
?72?????var?v4=config.v4?config.v4:null;
?73?????$.each(fourSelectData,function(k,v){
?74?????????appendOptionTo($s1,k,v.val,v1);
?75?????});
?76?????$s1.change(function(){
?77?????????$s2.html("");
?78?????????if(this.selectedIndex==-1)?return;
?79?????????var?s1_curr_val?=?this.options[this.selectedIndex].value;
?80?????????$.each(fourSelectData,function(k,v){
?81?????????????if(s1_curr_val==v.val){
?82?????????????????if(v.items){
?83?????????????????????$.each(v.items,function(k,v){
?84?????????????????????????appendOptionTo($s2,k,v.val,v2);
?85?????????????????????});
?86?????????????????}
?87?????????????}
?88?????????});
?89?????????if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
?90?????????$s2.change();
?91?????}).change();
?92?????$s2.change(function(){
?93?????????$s3.html("");
?94?????????if(this.selectedIndex==-1)?return;
?95?????????var?s1_curr_val?=?$s1[0].options[$s1[0].selectedIndex].value;
?96?????????var?s2_curr_val?=?this.options[this.selectedIndex].value;
?97?????????$.each(fourSelectData,function(k,v){
?98?????????????if(s1_curr_val==v.val){
?99?????????????????if(v.items){
100?????????????????????$.each(v.items,function(k,v){
101?????????????????????????if(s2_curr_val==v.val){
102?????????????????????????????if(v.items){
103?????????????????????????????????$.each(v.items,function(k,v){
104?????????????????????????????????????appendOptionTo($s3,k,v.val,v3);
105?????????????????????????????????});
106?????????????????????????????}
107?????????????????????????}
108?????????????????????});
109?????????????????}
110?????????????}
111?????????});
112?????????if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
113?????????$s3.change();
114?????}).change();
115?????$s3.change(function(){
116?????????$s4.html("");
117?????????if(this.selectedIndex==-1)?return;
118?????????var?s1_curr_val?=?$s1[0].options[$s1[0].selectedIndex].value;
119?????????var?s2_curr_val?=?$s2[0].options[$s2[0].selectedIndex].value;
120?????????var?s3_curr_val?=?this.options[this.selectedIndex].value;????
121?????????$.each(fourSelectData,function(k,v){
122?????????????if(s1_curr_val==v.val){
123?????????????????if(v.items){
124?????????????????????$.each(v.items,function(k,v){
125?????????????????????????if(s2_curr_val==v.val){
126?????????????????????????????if(v.items){
127?????????????????????????????????$.each(v.items,function(k,v){
128?????????????????????????????????????if(s3_curr_val==v.val){
129?????????????????????????????????????????if(v.items){
130?????????????????????????????????????????????$.each(v.items,function(k,v){
131?????????????????????????????????????????????????appendOptionTo($s4,k,v,v4);
132?????????????????????????????????????????????});
133?????????????????????????????????????????}
134?????????????????????????????????????}
135?????????????????????????????????});
136?????????????????????????????}
137?????????????????????????}
138?????????????????????});
139?????????????????}
140?????????????}
141?????????});
142?????????if($s4[0].options.length==0){appendOptionTo($s4,"...","",v4);}
143?????}).change();
144?????function?appendOptionTo($o,k,v,d){
145?????????var?$opt=$("<option>").text(k).val(v);
146?????????if(v==d){$opt.attr("selected",?"selected")}
147?????????$opt.appendTo($o);
148?????}
149?}
150?</script>
151?<style?type="text/css"?media="screen">
152?????select{width:100px;}
153?</style>
154?<select?id="Select1"?name="Select1"></select>
155?<select?id="Select2"?name="Select2"></select>
156?<select?id="Select3"?name="Select3"></select>
157?<select?id="Select4"?name="Select4"></select>

?

?代碼附件：fourSelect.rar（包含三級聯動的例子）

轉載于:https://www.cnblogs.com/shaoyun/archive/2010/09/04/1817655.html

總結

以上是生活随笔為你收集整理的通用四级联动下拉列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。