省市县横向三级菜单如何实现，请高手指点？

http://www.jb51.net/jiaoben/15656.html
http://www.codefans.net/jscss/tags.php?tag=%C8%FD%BC%B6%B2%CB%B5%A5
http://www.newxing.com/Tech/WebDevelop/JavaScript/select_437.html
希望对你有用：
<html>
<head>
<title>表单的校验</title>
<script type="text/JavaScript">
//登录名 6-18位字符,必须字符开头
//密码   6-18位字符
//确认密码--密码相同
//爱好-->要求至少写一个爱好
//出生地址-->省市
//增加按钮
var provinces=["北京","山西省","陕西省"];
var citys =[["北京"],
["太原","大同","忻州","临汾","运城"],
["西安","咸阳","宝鸡"]];
function refreshCity(){
var provinceSel = document.getElementById("province");
var citySel =
document.getElementById("city");
citySel.options.length=1;
var value = provinceSel.value;
if(value==-1){

}else{
var index = parseInt(value);
var citys1 = citys[index];
for(var i=0;i<citys1.length;i++){
var option = document.createElement("option");
var text = document.createTextNode(citys1[i]);
option.appendChild(text);
citySel.appendChild(option);
}
}
}

function f1(){
var nameMes = document.getElementById("loginNameMsg");
nameMes.style.display="";
}
function checkLoginName(){
var value = getValue("loginName");
var nameRegex=/^[a-zA-Z][\w_-]{5,17}$/;
if(nameRegex.test(value)){
getElementById("loginNameMsg").innerHTML="用户名正确";
getElementById("loginNameMsg").className="s2";
}else{
getElementById("loginNameMsg").innerHTML=" 请输入6-18位的字符,数字,_,要求必须是字符开头！";
getElementById("loginNameMsg").className="s1";
}
}
//onmouseover:鼠标指向
//onmouseout:鼠标离开
//onfoucs   :获取焦点
//onblur    :失去光标(焦点)
function getElementById(id){
return document.getElementById(id);
}
function getValue(id){
return document.getElementById(id).value;
}
</script>
<style>
.s1 {
color:red;
}
.s2 {
color:green;
}
</style>
</head>
<body>
<form>
  <table border=1 align="center" width="80%">
<tr>
<td width="10%">登录名</td>
<td width="40%">
<input id="loginName" onfocus="f1();"
    onblur="checkLoginName();">
</td>
<td width="50%">
<span id="loginNameMsg" style="display:none">
请输入6-18位的字符,数字,_,要求必须是
字符开头！
</span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input id="pwd" type="password"></td>
<td><span id="pwdMsg">
请输入6-18位的字符,数字,_
</span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input id="repwd" type="password"></td>
<td><span id="repwdMsg">
请输入确认密码
</span>
</td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender" >女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobbies">游泳
<input type="checkbox" name="hobbies">读书
<input type="checkbox" name="hobbies">游戏
</td>
<td>
<span id="hobbiesMsg">
请至少选择一个爱好!
</span>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province"  onchange="refreshCity();">
<option value="-1">-请选择-</option>
<option value="0">北京</option>
<option value="1">山西省</option>
<option value="2">陕西省</option>
</select>
省 
<select id="city">
<option>-请选择-</option>
</select>
市 
</td>
<td>
<span id="addressMsg">
请至少籍贯!
</span>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交">
</td>
</tr>
</table>
</from>
</body>
</html>
//获取国家信息
function GetCountryList<%=DivName %>()
{
     $.ajax({
       type:"Post",
       url:"<%=BLL.Config.root %>ProAjax/Clearing/GetCountry.aspx",
       data:"",
       success:function (msg){
         var datalist=eval(msg);
         for(var i=0;i<datalist.length;i++){
          var key=datalist[i][0];
          var value=datalist[i][1];
           $("<option value="+value+">"+key+"</option>").appendTo($("#ddlCountry<%=DivName %>"));
         }
          $("<option value=''>其他国家或地区</option>").appendTo($("#ddlCountry<%=DivName %>"));
          $("#ddlCountry<%=DivName %>").val(35);
          GetProvinceById<%=DivName %>();
       }
     })
}
//通过国家ID获取省份列表信息
function GetProvinceById<%=DivName %>(){
    var CountryID=$("#ddlCountry<%=DivName %>").val();
    $("#ddlprovince<%=DivName %>").html("");
    if(CountryID==""){
        //其他国家或地区
        $("#ddlprovince<%=DivName %>").css("display","none");
        $("#ddlCity<%=DivName %>").css("display","none");
        $("#ddlarea<%=DivName %>").css("display","none");
    }else{
       //选择了国家
        $("#ddlprovince<%=DivName %>").css("display","");
        $("#ddlCity<%=DivName %>").css("display","");
        $("#ddlarea<%=DivName %>").css("display","");
       var datalist="cid="+CountryID;
       $.ajax({
         type:"Post",
         url:"<%=BLL.Config.root %>ProAjax/Clearing/GetProvinceList.aspx",
         data:datalist,
         success:function(msg){
            if(msg!=""){
              //有省份
                 var datalist=eval(msg);
                 for(var i=0;i<datalist.length;i++){
                  var key=datalist[i][0];
                  var value=datalist[i][1];
                   $("<option value="+value+">"+key+"</option>").appendTo($("#ddlprovince<%=DivName %>"));
                 }
                $("<option value=''>请选择省份</option>").prependTo($("#ddlprovince<%=DivName %>"));
                $("#ddlprovince<%=DivName %>").val("");
             }else{
             //无省份
                $("<option value=''>请选择省份</option>").appendTo($("#ddlprovince<%=DivName %>"));
                $("#ddlCity<%=DivName %>").html("");
                $("<option value=''>请选择城市</option>").appendTo($("#ddlCity<%=DivName %>"));
                $("#ddlarea<%=DivName %>").html("");
                $("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));             }
          }
       })
    }
}

//通过省份获取城市列表
function GetCityById<%=DivName %>(){
   var provinceId=$("#ddlprovince<%=DivName %>").val();
   $("#ddlCity<%=DivName %>").html("");
   if(provinceId==""){
     //无,请选择省份
     $("<option value=''>请选择城市</option>").appendTo($("#ddlCity<%=DivName %>"));
   }else{
     //有选择了省份
     var datalist="pid="+provinceId;
       $.ajax({
         type:"Post",
         url:"<%=BLL.Config.root %>ProAjax/Clearing/GetCityList.aspx",
         data:datalist,
         success:function(msg){
            if(msg!=""&&msg!="[]"){
              //有城市
                 var datalist=eval(msg);
                 for(var i=0;i<datalist.length;i++){
                  var key=datalist[i][0];
                  var value=datalist[i][1];
                   $("<option value="+value+">"+key+"</option>").appendTo($("#ddlCity<%=DivName %>"));
                 }
                $("<option value=''>请选择城市</option>").prependTo($("#ddlCity<%=DivName %>"));
                $("#ddlCity<%=DivName %>").val("");
                $("#ddlarea<%=DivName %>").html("");
                $("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
             }else{
             //无城市
                $("<option value=''>请选择城市</option>").appendTo($("#ddlCity<%=DivName %>"));
                $("#ddlarea<%=DivName %>").html("");
                $("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
             }
          }
       })
   }
}

//通过城市获取县区列表
function GetArea<%=DivName %>(){
    var cityId=$("#ddlCity<%=DivName %>").val();
    $("#ddlarea<%=DivName %>").html("");
    if(cityId==""){
      //无，请选择城市
      $("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
    }else{
     //有选择城市
     var datalist="citycode="+cityId;
        $.ajax({
         type:"Post",
         url:"<%=BLL.Config.root %>ProAjax/Clearing/GetAreaList.aspx",
         data:datalist,
         success:function(msg){

            if(msg!=""&&msg!="[]"){
              //有县区
                 var datalist=eval(msg);
                 for(var i=0;i<datalist.length;i++){
                  var key=datalist[i][0];
                  var value=datalist[i][1];
                   $("<option value="+value+">"+key+"</option>").appendTo($("#ddlarea<%=DivName %>"));
                 }
                $("<option value=''>请选择县区</option>").prependTo($("#ddlarea<%=DivName %>"));
                $("#ddlarea<%=DivName %>").val("");
             }else{
             //无县区
                 $("<option value=''>请选择县区</option>").appendTo($("#ddlarea<%=DivName %>"));
             }
          }
       })
    }
}

调试易

省市县横向三级菜单如何实现，请高手指点？

解决方案 »