省市區三級聯動選擇, 在我們開發中很常見, 下一級的下拉框資料與上一級的下拉框的值緊密相關, 所以需要我們處理的時候格外小心, 及時清理資料, 非同步載入資料時再去繫結值不容半點馬虎.
       我今天給大家分享一個比較通用的Js外掛, 雖然叫JQuery外掛, 但也只是引用到了它一般的方法, 並非底層. 這個外掛除了省市區外, 還可以根據自己的意思靈活配置成你想要的三級聯動或二級聯動.
 
外掛的下載地址: http://download.csdn.net/download/freshflower/8748521 (賺點小積分, 嘿嘿)
 

引入Jquery, 再引入cascade.js. 然後我來講解一下使用方法

// 初始化例項
var obj = $.cascade({
   container: { first: '#firstid', second: '#secondid', third: '#thirdid' },
   method: 'post',
   cache: true,
   local: false,  //是否取本地資料: true:則需設定dataJson; false:則需設定dataUrl取伺服器上的資料. (推薦取伺服器的資料)
   dataUrl: { first: '/url/province', second: '/url/city?province=', third: '/url/area?city=' },  //這裡的URL地址根據你的實際情況設定
   field: {
       first: { text: 'areaname', value: 'areacode' },
       second: { text: 'areaname', value: 'areacode' },
       third: { text: 'areaname', value: 'areacode' }
   },
   options: {
       first: { text: 'Please Choose', value: '' },
       second: { text: '所有城市', value: '-' }, //在下拉控制元件上顯示"所有城市"的項, 其值為"-"
       third: { text: '', value: '' }  //為空表示只顯示資料項
   },
   startText: ['浙江省', '杭州市', '西湖區'],     //起始載入省市區的
   startValue: ['10', '100571', '10057103']    //起始載入的值(與startText二選一, 優先使用startValue)
});

// 方法呼叫 可呼叫的方法就只有這兩個, 其他方法為函式內部方法.
// 這兩個方法主要優點在於一次性設定, 無需考慮非同步的情況, 他會自動去處理非同步載入.
// 1. 設定選中值: 
obj.setValues(['10', '100571', '10057103']);  //依照陣列的值依次設定 一級下拉框,二級下拉框, 三級下拉框的值
// 2. 設定選中文字: 
obj.setTexts(['浙江省', '杭州市']);  //依照陣列的值依次設定 一級下拉框,二級下拉框的選中文字, (三級下拉框不設定,預設第一個選項)
 

重點講根據URL來獲取伺服器資料, 除一級下拉框對應的資料URL不額外加引數外,另外兩個都會根據上一下拉框所選中的值來請求資料, 例如: 省份選擇了浙江省, 那麼就要拉取浙江省下的所有城市, 這時, dataUrl.second就會將省份中選中的值當成引數向伺服器請求資料. (如上下的資料就會得到"/url/city?province=10"這個地址, 同理城市選擇了杭州市, 就會得到第三級資料的請求地址: "/url/area?city=100571")
 伺服器返回資料格式如下, 必須是JSON陣列 

//獲取到所有的省份  
//json中的areacode,與areaname欄位名稱可根據自身的需要寫,只要相關配置到初始化時的引數中的field中即可.  
[  
 {"areacode": 10, "areaname": "浙江省"},  
 {"areacode": 11, "areaname": "北京市"},  
 {"areacode": 12, "areaname": "天津市"},  
 {"areacode": 13, "areaname": "河北省"},  
 {"areacode": 14, "areaname": "山西省"},   
 {"areacode": 15, "areaname": "內蒙古自治區"} //,{...}省略很多  
]  
//------我---是---分---隔----線-------------  
//獲取到浙江省下面的市的資料, (獲取某個城市下的行政區就不用再枚舉了,結構是一樣的)  
[  
 {"areacode": 100570, "areaname": "衢州市"},   
 {"areacode": 100571, "areaname": "杭州市"},   
 {"areacode": 100572, "areaname": "湖州市"},   
 {"areacode": 100573, "areaname": "嘉興市"},   
 {"areacode": 100574, "areaname": "寧波市"},   
 {"areacode": 100575, "areaname": "紹興市"},   
 {"areacode": 100576, "areaname": "台州市"},   
 {"areacode": 100577, "areaname": "溫州市"},   
 {"areacode": 100578, "areaname": "麗水市"},   
 {"areacode": 100579, "areaname": "金華市"},   
 {"areacode": 100580, "areaname": "舟山市"}  
]  
 

如果你想取本地的資料, 那麼在函式初始化時, 必須初始化其本地資料dataJson, 格式如下:

dataJson ={"first": [  /* first必須是陣列,所有省份列表 */  
 {"areacode": 10, "areaname": "浙江省"},  
 {"areacode": 11, "areaname": "北京市"},  
 {"areacode": 12, "areaname": "天津市"},  
 {"areacode": 13, "areaname": "河北省"},  
 {"areacode": 14, "areaname": "山西省"},   
 {"areacode": 15, "areaname": "內蒙古自治區"} //,{...}省略很多  
],   
"second": {  /* 列舉所有的城市 */  
   "10":[{"areacode": 100570, "areaname": "衢州市"},{"areacode": 100571, "areaname": "杭州市"}/*,省略很多, 這裡的10指first中areacode=10的項,以其值作為key,那麼value就是城市列表的陣列 */  ],  
   "11": [{"areacode":11010,"areaname":"北京市"}]  
},  
  
"third": {   /* 枚舉出所有城市下所有的地區 */  
   "100571":[{"areacode": 10057101, "areaname": "上城區"}, {"areacode": 10057102, "areaname": "下城區"}, {"areacode": 10057103, "areaname": "西湖區"}]  
  /* "100572":[{...},{...}], 省略很多很多.... */  
} //綜合起來,資料量太大了, 不是好事, 所以不推薦使用. 
 

最後再訂個例子出來:

<!-- 引入兩個必要的JS檔案 -->  
<script type="text/javascript" src="jQuery.min.js"></script>  
<script type="text/javascript" src="cascade.js"></script>  
  
<div class="span4" style="text-align: right; width: 95%">  
    <form action="" id="frompagelist" class="form-horizontal ">  
        <span>第一組選擇器:</span>  
        <select id="p_s" style="width:100px;"></select>  
        <select id="p_c" style="width:100px;"></select>  
        <select id="p_a" style="width:100px;"></select>  
  
        <span style="margin:0px 20px;"></span>  
        <span>第二組選擇器:</span>  
        <select name="province" style="width:100px;"></select>  
        <select class="cityclass" style="width:100px;"></select>  
        <select id="a_a" style="width:100px;"></select>  
  
        <input type="button" value="選定浙江省" onclick="chooseArea()">  
    </form>  
</div>  
  
<script type="text/javascript">  
    $(document).ready(function(){  
        initAreaSelector()  
    });  
      
    var secondSelector = null;  
    function initAreaSelector(){  
        //第一組初始化  
        $.cascade({  
            container: { first: '#p_s', second: '#p_c', third: '#p_a' },  
            dataUrl: {  
                first: '/Area/GetArea1',  
                second: '/Area/GetArea2?area1=',  
                third: '/Area/GetArea3?area2='  
            },  
            field: {  
                first: { text: 'areaname', value: 'areacode' },  
                second: { text: 'areaname', value: 'areacode' },  
                third: { text: 'areaname', value: 'areacode' }  
            },  
            options: {  
                first: { text: '請選擇', value: '' },  
                second: { text: '所有城市', value: '' },  
                third: { text: '所有地區', value: '' }  
            },  
            startText: ['廣東省', '深圳市', '南山區']  
        });   
  
        //第二組  
        secondSelector = $.cascade({  
            container: { first: 'select[name="province"]', second: 'select.cityclass', third: '#p_a' },  
            dataUrl: {  
                first: '/Area/GetArea1',  
                second: '/Area/GetArea2?area1=',  
                third: '/Area/GetArea3?area2='  
            },  
            field: {  
                first: { text: 'areaname', value: 'areacode' },  
                second: { text: 'areaname', value: 'areacode' },  
                third: { text: 'areaname', value: 'areacode' }  
            },  
            startText: ['江西省', '南昌市', '東湖區'] //也可以用 startValue來代替  
        });   
    }  
  
    function chooseArea(){  
        secondSelector.setTexts(['浙江省', '杭州市', '西湖區']);  
        // or:  
        // secondSelector.setValues(['10', '100571', '10057103']);  
    }  
</script> 

最後, 這個外掛可以應用到很多三級聯動或兩級聯動選擇, 並不侷限於省市區的選擇, 這裡只是拿他來做為一個示例, 希望朋友們多多支援, 有錯誤的地方, 歡迎提出來.