js注册表单中实现地区选择效果

最新推荐文章于 2023-09-22 18:06:26 发布

weixin_30343157

最新推荐文章于 2023-09-22 18:06:26 发布

阅读量273

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/helloworldlx/p/8975829.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择地区</title>
</head>
<script type="text/javascript">
    var regionList=[];
    regionList["湖南省"]=["长沙市","株洲市","邵阳市"];
    regionList["广东省"]=["广州市","深圳市","东莞市"];

    onload=function(){
        var selectProvince=document.querySelector("#province");
//这个地方使用for(var i=0;i<region.length;i++)就会报错，不知道是为啥，麻烦知道的大神给指导下哈
        for(var i in regionList){
            var element=document.createElement("OPTION");
            element.value=i;
            element.innerHTML=i;
            selectProvince.appendChild(element);
        }
    }

    function changeCity(){
        var selectProvince=document.querySelector("#province");
        var selectCity=document.querySelector("#city");
        selectCity.innerHTML="<option>请选择城市/地区</option>";
        for(var i in regionList[selectProvince.value]){
            var element=document.createElement("OPTION");
            element.value=regionList[selectProvince.value][i];
            element.innerHTML=regionList[selectProvince.value][i];
            selectCity.appendChild(element);
        }
    }
</script>
<body>
<div id="main">
    <dl class="register_row">
        <dt>所在地区：</dt>
        <dd>
            <select id="province" onChange="changeCity()" style="width:120px;">
                <option>请选择省/城市</option>
            </select>
        </dd>
        <dd>
            <select id="city"  style="width:130px;">
                <option>请选择城市/地区</option>
            </select>
        </dd>
    </dl>
</div>
</body>
</html>