jquery插件代码
;(function ($) {
$.fn.extend({
"initcity":function(settings){
var selectid = this.selector;
var selectprov = selectid+" .prov"; //省的select
var selectcity = selectid+" .city"; //市的select
//参数
var sysParas = {
provalue:null, //省值
cityvalue:null //市值
};
//赋值
$.extend(sysParas,settings);
//获取下拉列表数据
var provcitylist = getOptionData();
$.each(eval(provcitylist), function (i, item) {
$(selectprov).append("<option value='" + item.n + "' >" + item.n + "</option>");
});
//选择省下拉触发
$(selectprov).change(function () {
//获取省下拉选择的选中下标
var provindex = $('option:selected', selectprov).index()
$(selectcity).empty();
$.each(eval(provcitylist)[provindex].citylist, function (i, item) {
$(selectcity).append("<option value='" + item.n + "' >" + item.n + "</option>");
});
});
//绑定selectprov
if (sysParas.provalue!=null) {
$(selectprov).val(sysParas.provalue);
};
//刷新selectcity
$(selectprov).change();
//绑定selectcity
if (sysParas.cityvalue!=null) {
$(selectcity).val(sysParas.cityvalue);
};
}
});
function getOptionData(){
var provcitylist = [
{
"n":'全部',
citylist:[{"n":' 全部'}]
},{
"n": '安徽',
citylist: [{ "n": '安庆' },{ "n": '蚌埠' },{ "n": '亳州' },{ "n": '巢湖' },{ "n": '滁州' }]
},{
"n": '澳门',
citylist: [{ "n": '大堂区' },{ "n": '氹仔' },{ "n": '风顺堂区' },{ "n": '花地玛堂区' }]
},{
"n": '北京',
citylist: [{"n":"昌平"},{"n":"朝阳"},{"n":"东城"},{"n":"大兴"},{"n":"房山"},{"n":"丰台"}]
},{
"n": '重庆',
citylist: [{"n":"北碚"},{"n":"巴南"},{"n":"璧山"},{"n":"城口"},{"n":"长寿"},{"n":"大渡口"}]
}];
return provcitylist;
}
})(jQuery);
HTML代码
<body>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript" src="wxcity.js"></script>
<script type="text/javascript">
$(function(){
//$("#citylist").initcity(); //不设置值
$("#citylist").initcity({
provalue:'北京',
cityvalue:'东城'
});
});
</script>
<span id="citylist">
地区标签:
<select class="prov" >
</select>
<select class="city" ></select>
</span>
</body>
数据是以微信地区选择为例
完整代码下载地址:完整例子下载