省市级联选择器实现-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_8185/article/details/82374614


<html>

<head>

<title>省市级联</title>
<script type="text/javascript">
function mysub(){
    document.myf.submit();
}

function showerr(val){
    var reg=/^\w{6,12}$/gi;
    if(reg.test(val)==false){
        document.getElementById("info").style.display="inline";
        return false;
    }
            document.getElementById("info").style.display="none";
        return true;

}
    var arrprov=new Array();
    arrprov["湖南"]=new Array("长沙","株洲");
     arrprov["湖北"]=new Array("武汉","荆州");
     arrprov["河南"]=new Array("郑州","石家庄");
     arrprov["河北"]=new Array("保定","开封");
function init(){
//  取到下拉列表
    var prov=document.myf.prov;
//清除原来已经存在的省份
    prov.options.length=0;
    var pname;
    var index=0;
    for(i in arrprov){
    //取到第一个值并为后面的市传值
        if(index==0){
            pname=i;
        }
        index++;
    //将新的省份放进options中
    var newpro=new Option(i,i);
    prov.options.add(newpro);

        }
        showcity(pname);
}


function showcity(proname){
    var city=document.myf.city;
    city.options.length=0;
    for(var i in arrprov[proname]){
        var newcity=new Option(arrprov[proname][i],arrprov[proname][i]);
       city.options.add(newcity);
    }

 }


</script>

</head>
<form name="myf" action="http//www.baidu.com" method="post">
<table>
    <tr>
        <td colspan="2">用户注册</td>
    </tr>
    <tr>
        <td>用户名：</td>
        <td><input type="text" name="uname" onblur="showerr(this.value)"/><div style="display:none;" id="info">用户名必须是6-12之间且要是数字,下划线,字母组成</div></td>
    </tr>
    <tr>
        <td>
            <select name="prov" onchange="showcity(this.value)">
                <option></option>
            </select>省
            <select name="city">
                <option></option>
            </select>市
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button"  value="注册" onclick="mysub()"/>
            <input type="reset" value="清空" onclick="showerr('sadadads')"/>
        </td>
    </tr>

</table>
</form>
<body onload="init()">

</body>

</html>