Cacher is the code snippet organizer for pro developers

<div class="form-group">
    <label class="col-sm-2 control-label">地区</label>
    <div class="col-md-2">
        <select data-placeholder="选择省份..." name="province" child="city,area" onchange="areaChangeCallback(this);" class="auto form-control chosen-select province"></select>
    </div>
    <div class="col-md-2">
        <select data-placeholder="选择城市..." name="city" child="area" parent="province" onchange="areaChangeCallback(this);" class="auto form-control chosen-select city"></select>
    </div>
    <div class="col-md-2">
        <select data-placeholder="选择区/县..." name="area" parent="city" pattern="required" class="auto form-control chosen-select area"></select>
    </div>
</div>

<script>

//artTemplate模板 {name:组件名字,area_id:选中的地区ID,data:地区的对象}
var areaTemplate = '<option value="">请选择</option>'+'<%for(var index in data){%>'+'<%var item = data[index]%>'+'<option value="<%=item.area_id%>" <%if(item.area_id == select_id){%>selected="selected"<%}%>><%=item.area_name%></option>'+'<%}%>';

/**
 * 切换城市地区
 * @param _self 地域对象
 */
function areaChangeCallback(_self)
{
	var parent_id = _self.value;
	var childName = $(_self).attr('child');

	if(!childName)
	{
		return;
	}

	//拆分子对象
	var childArray = childName.split(',');
	for(var index in childArray)
	{
		$('[name="'+childArray[index]+'"]').empty();
	}

	//生成js联动菜单
	createAreaSelect(childArray[0],parent_id);
}


/**
 * 生成地域js联动下拉框
 * @param name
 * @param parent_id
 * @param select_id
 */
function createAreaSelect(name,parent_id,select_id)
{
	//生成地区
	$.getJSON("{url:/block/area_child}",{"aid":parent_id,"random":Math.random()},function(json)
	{
		$('[name="'+name+'"]').html(template.render('areaTemplate',{"select_id":select_id,"data":json}));

		if (parent_id) {
            $(".city").chosen("destroy");
			$(".city").chosen();

			$(".area").chosen("destroy");
			$(".area").chosen();
		}
		else {
			$(".province").chosen();
			$(".city").chosen();
			$(".area").chosen();
		}
	});
}
    
$(function(){
	//初始化地域联动
	template.compile("areaTemplate",areaTemplate);

	{if:isset($ship) && $ship}
	createAreaSelect('province',0,{$ship['province']});
	createAreaSelect('city',{$ship['province']},{$ship['city']});
	createAreaSelect('area',{$ship['city']},{$ship['area']});
	{else:}
	createAreaSelect('province',0,'');
	{/if}
});

    
// 参考：[前端模版artTemplate的介绍及使用](http://blog.csdn.net/playboyanta123/article/details/45536501)
</script>