码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-05-01 14:08:45      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:row   rip   for   oct   地方   深圳   深圳市   onload   gis   

<!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>

 

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

标签:row   rip   for   oct   地方   深圳   深圳市   onload   gis   

原文地址:https://www.cnblogs.com/helloworldlx/p/8975829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!