city.vm 2.57 KB
#set($page_title="测试标题1")
#set($crumbs="首页:/home,设置,城市列表")

<div class="row">
    <div class="col-xs-12">
    
    	<h4 class="lighter">
			<i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
			<a href="#modal-wizard" data-toggle="modal" class="pink"> 添加新城市 </a>
		</h4>
    
        <div class="col-xs-12 col-sm-4">
			<div class="widget-box">
				<div class="widget-header">
					<h4 class="widget-title">省份</h4>
				</div>
				<div class="widget-body">
					<div class="widget-main">
						<select  class="form-control" size="20" id="region_first" name="citySelect" sublevel="region_second">
							#foreach($c in $city)
							<option value="${c.regionId}" >${c.regionName}</option>
							#end
						</select>
					</div>
				</div>
			</div>
		</div>
		
		<div class="col-xs-12 col-sm-4">
			<div class="widget-box">
				<div class="widget-header">
					<h4 class="widget-title">城市</h4>
				</div>
				<div class="widget-body">
					<div class="widget-main">
						<select class="form-control" size="20" id="region_second" name="citySelect" sublevel="region_third">
						</select>
					</div>
				</div>
			</div>
		</div>
		
		<div class="col-xs-12 col-sm-4">
			<div class="widget-box">
				<div class="widget-header">
					<h4 class="widget-title">县</h4>
				</div>
				<div class="widget-body">
					<div class="widget-main">
						<select class="form-control" size="20" id="region_third" name="citySelect">
						</select>
					</div>
				</div>
			</div>
		</div>
		
    </div>
</div>

<script type="text/javascript">
$(function (){
	
	function chooseCity(city){
		$(city).dblclick(function (){
			var parent = $(this).parent();
			if($(parent).attr("disabled")){
				return ;
			}
			var url = "${webUtils.getLocalPath("city/getCityJsonList.do")}?parentId=" + this.value;
			$(parent).attr("disabled","disabled");
			$.get( url, function( data ) {
				$(parent).removeAttr("disabled");
				var subLevel = $(parent).attr("sublevel");
				if($("#" + subLevel)){
					insertData(data,subLevel);
				}
			});
		});
	}
	
	function insertData(data,select){
		clearCity(select)
		for(var i=0;i<data.length;i++){
			var d = data[i];
			var option = $("<option value='"+d.regionId+"'>"+d.regionName+"</option>");
			chooseCity(option);
			$("#"+select).append(option);
		}
	}
	
	function clearCity(select){
		$("#"+select).html("");
		var sublevel = $("#"+select).attr("sublevel");
		if(sublevel){
			$("#"+sublevel).html("");
			clearCity(sublevel);
		}
	}
	
	$("select[name='citySelect'] option").each(function (){
		chooseCity(this);
	});
})
</script>