jquery实现 城市选择框

 

jquery实现 城市选择框。

 

 

城市单选框：

 

 1、引入js和css

<script src="${staticPath}/resources/jquerySelect/js/city.js${version}" ></script>
<link  rel="stylesheet"  type="text/css"  href="${staticPath}/resources/jquerySelect/css/city.css${version}"/>

2、指定输入框：

$(function(){
	var queryCity = new Vcity.CitySelector({input:'selectFconfigid',name:'选择城市'});
});

 3、输入框：

<span>
    城市：<input type="hidden" value="${paramMap.fconfigid}" name="fconfigid"  id="selectFconfigid"/>
</span>

 4、修改city.js文件：（在文件最后）

$(function(){
	var query_city_type ;
	//查询方式 有的城市查询是以分站为主 有的是以城市编号为主  默认为分站城市
	if(typeof ( __query_city_type ) == 'undefined'){
		 query_city_type ='fconfigid';
	}else{
		 query_city_type = (__query_city_type=='')?'cityid':__query_city_type;
	}
	
	$.ajax({
		type : "get",
		url : getContextPath()+'/ajax/findFconfigSelect',
		contentType : "application/json;charset=UTF-8",
		data:{type:query_city_type},
		cache : false, // 默认为true。设置为 false 将不会从浏览器缓存中加载请求信息。
		dataType : "json",
		async:false,
		success : function(data) {
			Vcity.allCity = data;
		},
		error:function(error){
			alertMessageContent(error+"获取城市列表出错！！");
		}
	});
	//执行ajax请求 所有城市的请求Id统一命名为__selectCity
	if(typeof ( __defaultSelectCity ) == 'undefined'){
		if($("#fconfigid").length>0){
			VcitySelect=new Vcity.CitySelector({input:'fconfigid',name:'选择城市'});
		}
	}
})

 其中：url : getContextPath()+'/ajax/findFconfigSelect'指定数据来源；

     返回数据格式为字符串类型的列表或数组，eg: Vcity.allCity = ["北京市|bj|1", "上海市|sh|84500"];