1. 程式人生 > >用jquery寫的json省市縣三級聯動下拉

用jquery寫的json省市縣三級聯動下拉

<form action="#" name="myform">
	<label>省</label><select name="provice" id="provice"><option value="-1">請輸入省份</option></select>
	<label>市</label><select name="city" id="city"><option value="-1">請輸入城市</option></select>
	<label>縣</label><select name="locale" id="locale"><option value="-1">請輸入區縣</option></select>
</form>

2. 定義json資料來源:

var jsonData = [{
    treeNode : '請輸入省份',
    value : -1,
    childNode : [{
	treeNode : '請輸入城市',
	value : -1,
	childNode : [{
	        treeNode : '請輸入區縣',
		value : -1,
		childNode : [] 
	}]
    }]	
},{
    treeNode : '北京',
    value : 1,
    childNode : [{
	treeNode : '東城區',
	value : 11,
	childNode : []
    },{
	treeNode : '西城區',
	value : 12,
	childNode : []
    }]
},{
    treeNode : '廣西壯族自治區',
    value : 2601,
    childNode : [{
	treeNode : '南寧',
	value : 6653,
	childNode : [{
		treeNode : '橫縣',
		value : 10799,
		childNode : []
	}, {
		treeNode : '賓陽縣',
		value : 10800,
		childNode : []
        }]
    }]
}]

3. javascript程式碼:
function initCountry(){
	var provice = $("#provice");
	var city = $("#city");
	var locale = $("#locale");
	var proviceStr = "";
	$.each(jsonData,function(index,items){
		proviceStr += "<option value='"+jsonData[index].value+"'>"+jsonData[index].treeNode+"</option>";
	});
	provice.empty().append(proviceStr);
	provice.bind("change",function(){
		if($(this).find(":selected").attr("value") == -1){		
			city.empty().append("<option value='-1'>請輸入區縣</option>");
		}
	});
	provice.bind("change",function(){
		var cityStr = '';
		var index = provice.find(":selected").index();
		$.each(jsonData[index].childNode,function(index,items){
			city.empty();
			cityStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";
			city.append(cityStr);
		})
		changeLocale();
	});
	city.bind("change",changeLocale);
	function changeLocale(){
		var localeStr = '';
		var index = provice.find(":selected").index();
		var index2 = city.find(":selected").index();
		$.each(jsonData[index].childNode[index2].childNode,function(index,items){
			locale.empty();
			localeStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";
			locale.append(localeStr);
		})
		if(localeStr == ''){
			locale.empty();
			locale.append("<option value='-11'>請輸入區縣</option>");
		}
	}
}
$(function(){
	initCountry();
	
})