jquery外掛程式 省市聯動

2022-03-09 10:03:16 字數 1866 閱讀 1344

由於專案需要需要實現乙個省市聯動，由於業務有一些特殊的需求，使用現有的外掛程式略有不便，就自己實現了乙個。

首先需要儲存地區資料的js資料檔案，我這裡命名為areadata.js，內容如下：

/**


* 儲存地區資訊


* 資料格式


* areadata = [}, ]


* 直轄市存在-1，表示就是直轄市


*/(function(window) },},},},,,,,,,,,},,,,,,,,},,,,,,,,,,,,,];


})(window);
外掛程式檔名為：provincecity.js，原始碼：

(function($) areadata 地區陣列 格式：[},]


* @param options 一些配置選項


* @returns jquery物件


*/$.fn.cityselect = function(areadata, options), options);


var $province = $(this).find('select').eq(0);


var $city = $(this).find('select').eq(1);


//-1是直轄市資訊


var provicneid = opts.provinceid;


var cityid = opts.cityid;


var isshowdefaultval = opts.isshowdefaultval;


var isdealcomarea = opts.isdealcomarea;


var defaultdata = ['請選擇', '-2'];


var tmparr = ;


//增加下拉項到臨時陣列


var addopt = function(val,text,defval);


//省份變更聯動城市下拉


var changehandler = function()else 


});}


$city.html(tmparr.join(''));


};//初始化省份


var initprovince = function() );


$province.html(tmparr.join(''));


};//初始化事件


var init = function() 


init();


return this;


};}(jquery));
可根據需要稍作調整

例子基本結構如下：
使用方法：

第一種：初始化省市選擇

$('.area').cityselect(areadata);
效果：

第二種：預設不顯示【請選擇】

$('.area').cityselect(areadata, );
效果：

第三種：有初始省市

$('.area').cityselect(areadata, );
效果：

第四種：屬於業務的特殊需求，當為直轄市的時候，只顯示直轄市，不顯示分割槽（這個需求比較特殊）

$('.area').cityselect(areadata, );
效果：

在這裡做一下記錄，歡迎拍磚~

jQuery實現省市聯動

未實現任何功能之前 實現功能之後 實現該功能的jquery核心 實現該二級省市聯動的 1 2339 4041 42 請選擇 43福建省 44河南省 45河北省 46陝西省 47山東省 4849 5051 52 請選擇 5354 55jquery實現省市聯動.html 當選擇另乙個省份時，把現有的城市...

jquery省市二級聯動外掛程式 2

cityinfo initprov function prov,city,defaultprov,defaultcity provel.html provhtml initcities provel,cityel,defaultcity provel.change function initciti...

Jquery實現省市區聯動

jquery 省市縣聯動外掛程式 author kxt example test province city county fn.province city county function vprovince,vcity,vtown get xml province city.xml functio...