首先在head中载入jquery库和cityselect插件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。
<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
jQuery
调用cityselect插件非常简单，直接调用：
$("#city").citySelect()
自定义参数调用，设置默认省市区。自定义参数调用，设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时，隐藏select
})
当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
})
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
})
http://download.csdn.net/detail/liujian_01/4974474你看看这个吧，就是第一个变动触发onchange事件，获取对应的二级地区，上面是用ajax从数据库获取二级地区，然后把二级下拉option清空，往Select对象中加入获取到的二级地区
<HEAD><META http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<TITLE>用户注册</TITLE>
<SCRIPT language="javascript" src="check.js"></SCRIPT>
</HEAD>
<STYLE type="text/css">
td{font-size:12pxline-height:30px}
div{font-size:12pxline-height:30px}
.p1{border-left:1 #61B4D3 solid border-bottom:1 #61B4D3 solidbackground-color:#D3EAF3text-align:right}
.p2{border-left:1 #cccccc solid border-bottom:1 #cccccc solid}
.p3{border-right:1 #cccccc solid border-bottom:1 #cccccc solid}
.font_error{font-size:12pxcolor:#ff0000}
.font_true{font-size:12pxcolor:#56B429}
</STYLE>
<SCRIPT language="JavaScript" >
<!--下拉框级联开始-->
//定义
var cityList = new Array( )
cityList['北京'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山']
cityList['上海'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区']
cityList['河南省'] = ['郑州','洛阳','开封', '新乡','焦作','周口','南阳','安阳','信阳']
cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照']
cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州']
cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江']
//当选择的省发生变化时城市改变时的方法
function changeCity( )
{
//得到选择的省份选项的索引
var province=document.myform.province.value
//清空城市下拉框原内容
document.myform.city.options.length=0
//遍历数组
for (var i in cityList)
{
//如果数组中的省份和选择的省份相同就把数组中的那个省份的城市加到城市下拉列表中去
if (i == province)
{
for (var j in cityList[i])
{
document.myform.city.options.add(new Option(cityList[i][j], cityList[i][j]))
}
}
}
//让城市下拉列表中默认选中第一个城市
document.myform.city.options.selctIndex=0
}
//当网页加载时将省份加到省份下拉列表中去
function loadAll( )
{ for (var i in cityList)
{
document.myform.province.options.add(new Option(i, i))
}
//默认选中第一个
document.myform.province.selectedIndex = 0
}
<!--下拉框级联结束-->
</SCRIPT>
<BODY onLoad="loadAll( )">
<DIV align="center"><IMG src="image/top.jpg"><BR><BR>
<FONT color="#FF0000" size="3"><STRONG>以下为必填项</STRONG></FONT><BR>
<BR></DIV>
<TABLE width="762" border="0" cellspacing="0" cellpadding="0" align="center">
<FORM action="success.htm" method="post" name="myform" target="_blank">
<TR>
<TD class="p1" style="border-top:1 #61B4D3 solid" width="120">用户名：</TD>
<TD width="180" class="p2" style="border-top:1 #cccccc solid"> <INPUT name="username" type="text" size="25" onBlur="checkUser(username)"></TD>
<TD class="p3" style="border-top:1 #cccccc solid"><DIV id="userNameInfor">4-20个字符(可使用字母、数字、下划线)</DIV>
</TD>
</TR>
<TR>
<TD class="p1" >密码：</TD>
<TD class="p2"> <INPUT name="pass" type="password" size="27" onBlur="checkpass(pass)"></TD>
<TD class="p3"><DIV id="passinfor">密码由6-16个字符(可使用字母、数字、下划线)</DIV></TD>
</TR>
<TR>
<TD class="p1">确认密码：</TD>
<TD class="p2"> <INPUT name="repass" type="password" size="27" onBlur="checkrepass(pass,repass)"></TD>
<TD class="p3"><DIV id="repassinfor">请再输入一遍您上面输入的密码</DIV></TD>
</TR>
<TR>
<TD class="p1">电子邮件地址：</TD>
<TD class="p2"> <INPUT name="email" type="text" size="25" onBlur="checkemail(email)"></TD>
<TD class="p3"><DIV id="emailinfor">请输入电子邮件地址</DIV></TD>
</TR>
<TR>
<TD class="p1">城市：</TD>
<TD class="p2" colspan="2" style="border-right:1 #cccccc solid"> <SELECT name="province" id="province" onChange="changeCity( )"><OPTION>--请选择省份--</OPTION></SELECT> <SELECT name="city" id="city" >
<OPTION>--请选择城市--</OPTION></SELECT></TD>
</TR>
<TR>
<TD colspan="3" align="center" height="50" class="p2" style="border-right:1 #cccccc solid"><A href="success.htm"><IMG src="image/reg.jpg" border="0"></A></TD>
</TR></FORM>
</TABLE>
</BODY>
</HTML>
这下可以了吧！
