【js与jquery】三级联动菜单的制作

1.效果如图所示：

2.html代码：

       <li><span class="receiving">所在地区：</span>
			<span id="addr_select">
					<select id='province_select' name='province'></select> 
					<span id="city_select_poss" class="ssq"></span>
					<span id="town_select_poss" class="ssq"></span>
			</span>
			<font color="#FF0000">*</font>
       </li>
        <li>
		  <span class="receiving">街道地址：</span><span id="pre-address"></span>
		  <input type="text" id="add_addr_input" name="address" value="" style="width: 180px;"/>
		  <font color="#FF0000"> *</font><em id="add_addr_input_info"></em>
       </li>
        <li>
		  <span class="receiving">邮政编码：</span>
		  <input type="text" value="" id="postcode_add" name="postcode" style="width: 180px;"/>
		  <font color="#FF0000"> </font>
	</li>

3.jquery代码：

$(document).ready(function(){
	province_list();//加载省份下拉菜单
	$("#province_select").change(function(){//省份选项发生改变时
		var province = $("#province_select").val();
		$("#pre-address").html(province);
		showcity(province);//省份发生变化时，城市下拉菜单也要随之变化
		$("#postcode_add").attr('value', '');//在选择town项时，会自动获取邮政编码
	})
})

//省份下拉菜单
function province_list(){
	$.getJSON('/?c=addr&a=getprovince',
			{},
			function(data){
				$("#province_select").append("");
				$.each(data,function(i,k){
					if ( i==0 ) {
						$("#province_select").append("<option selected>请选择</option><option value='"+k.local_name+"' >"+k.local_name+"</option>");
						showcity(k.local_name);
					} else {
						$("#province_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");
					}
				})
			});
}
//显示城市下拉菜单
function showcity(province){
	$.getJSON('/?c=addr&a=getcity',
			{province:province},
			function(data){
				$("#city_select_poss").html("");
				$("#town_select_poss").html("");
				if (data) {
					$("#city_select_poss").html("<select id='city_select' name='city' onChange='city_select_function();'></select>");
				}
				$("#city_select").html("");
				$.each(data,function(i,k){
					if ( i == 0){
						$("#city_select").append("<option  selected>请选择</option><option value='"+k.local_name+"'>"+k.local_name+"</option>");
						var addr = province + k.local_name;
						//$("#pre-address").html(addr);
						showtown(k.local_name);
					} else {
						$("#city_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");
					}
				})
			})
}

//显示城乡下拉菜单
function showtown(city){
	$.getJSON('/?c=addr&a=gettown',
			{city:city},
			function(data){
				if (data) {
					$("#town_select_poss").html("<select id='town_select' name='town' οnchange='town_select_function();'></select>");
				} else {
					$("#town_select_poss").html("");
				}
				$("#town_select").html("");
				$.each(data,function(i,k){
					if ( i == 0 ) {
						$("#town_select").append("<option selected>请选择</option><option value='"+k.local_name+"'>"+k.local_name+"</option>");
					} else {
						$("#town_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");
					}
				})
			}
			)
}
//获取邮政编码
function getPostCode(town, city, province,id){
	$.get('/?c=addr&a=getpost',
			{town:town,city:city,province:province},
			function( data ){
				if ( data > 0 ) {
					if ( id == "" || id== undefined) {
						$("#postcode_add").attr('value', data);
					} else {
						$("#"+id+"postcode_add").attr('value', data);
					}
				} else {
					//$("#postcode_add").attr('value', '');
					if ( id == "" || id== undefined) {
						$("#postcode_add").attr('value', '');
					} else {
						$("#"+id+"postcode_add").attr('value', '');
					}
				}
			}
		)
}

//城市选项发生改变时，触发此函数
function city_select_function() {
	var province = $("#province_select").find("option:selected").text();
	var city = $("#city_select").find("option:selected").text();
	var addr = province + city;
	$("#pre-address").html(addr);
	showtown(city);
	var town = $("#town_select").find("option:selected").text();
	getPostCode(town, city, province);
}

//城乡选项发生变化时，触发此函数
function town_select_function(){
	var province = $("#province_select").find("option:selected").text();
	var city = $("#city_select").find("option:selected").text();
	var town = $("#town_select").find("option:selected").text();
	var addr = province + city + town;
	$("#pre-address").html(addr);
	getPostCode(town, city, province);
}