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>
数据是以微信地区选择为例
完整代码下载地址:完整例子下载