【JS外掛】下拉框通用三級聯動選擇 省市區三級聯動選擇
阿新 • • 發佈:2018-12-31
省市區三級聯動選擇, 在我們開發中很常見, 下一級的下拉框資料與上一級的下拉框的值緊密相關, 所以需要我們處理的時候格外小心, 及時清理資料, 非同步載入資料時再去繫結值不容半點馬虎.
我今天給大家分享一個比較通用的Js外掛, 雖然叫JQuery外掛, 但也只是引用到了它一般的方法, 並非底層. 這個外掛除了省市區外, 還可以根據自己的意思靈活配置成你想要的三級聯動或二級聯動.
外掛的下載地址: http://download.csdn.net/download/freshflower/8748521 (賺點小積分, 嘿嘿)
我今天給大家分享一個比較通用的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>
最後, 這個外掛可以應用到很多三級聯動或兩級聯動選擇, 並不侷限於省市區的選擇, 這裡只是拿他來做為一個示例, 希望朋友們多多支援, 有錯誤的地方, 歡迎提出來.