您的位置：首页 > Web前端 > JavaScript

js中省市级联的实现

2014-06-11 14:20 351 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="javascript">countries=["中国","美国","英国"];//中国省、直辖市countries["中国"]=['北京', '上海', '重庆', '广东', '湖北', '浙江','湖南','新疆','西藏'];//美国countries["美国"]=['华盛顿', '纽约', '拉斯维加斯', '底特律', '夏威夷', '洛杉矶', '丹佛', '休斯敦'];//英国countries["英国"]=['伦敦', '曼彻斯特', '利兹', '纽卡斯尔', '伯明翰'];
//广东省下的市countries["中国"]["广东"]=['广州','东莞','惠州'];//湖北省下的市countries["中国"]["湖北"]=['鄂州','宜昌','武汉','荆州','荆门','黄石','襄樊'];//浙江省下的市countries["中国"]["浙江"]=['杭州','温州','金华','义乌','宁波'];//湖南省下的市countries["中国"]["湖南"]=['岳阳','湘潭','长沙'];
function show_p(thisCountry){	document.getElementById("city").innerHTML="";	document.getElementById("province").innerHTML="";	if(thisCountry!="")	{		var p="";		for(i=0;i<countries[thisCountry].length;i++)		{			p+="<option value='"+countries[thisCountry][i]+"'>"+countries[thisCountry][i]+"</option>";		}				document.getElementById("province").innerHTML="<select onchange=showC('"+thisCountry+"',this.value)>"+p+"</select>";	}	else		document.getElementById("province").innerHTML="";}
function showC(thisCountry,thisP){	document.getElementById("city").innerHTML="";	var c="";	for(i=0;i<countries[thisCountry][thisP].length;i++)	{		c+="<option>"+countries[thisCountry][thisP][i]+"</option>";	}		document.getElementById("city").innerHTML="<select>"+c+"</select>";}</script></head>
<body>请选择国家：<select id="country" onchange="show_p(this.value)">	<option value="">请选择国家</option>	<script language="javascript">		for(i=0;i<countries.length;i++)		document.write("<option value='"+countries[i]+"'>"+countries[i]+"</option>");	</script></select><span id="province"></span><span id="city"></span></body></html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html
                                                js
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航