<!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注册表单中实现地区选择效果的更多相关文章

  1. Js 向表单中添加多个元素

    @{ ViewBag.title = "地图导航"; } @model YT.XWAJ.Public.Application.MapNavigation.Dto.MapNaviga ...

  2. js组件开发-移动端地区选择控件mobile-select-area

    移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空 ...

  3. 没啥用，更换注册表信息使webbrower选择适合的版本

    /// <summary>            /// 修改注册表信息来兼容当前程序            ///             /// </summary>   ...

  4. js 交换表单中值

    <html> <head> <meta charset="utf-8" /> <script type="text/javasc ...

  5. JS验证表单中TEXT文本框中是否含有非法字符

    <form id="form" action="" method="post"> <input type="hi ...

  6. [转帖]Windows注册表内容详解

    Windows注册表内容详解 来源:http://blog.sina.com.cn/s/blog_4d41e2690100q33v.html 对 windows注册表一知半解 不是很清晰 这里学习一下 ...

  7. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  8. Windows注册表内容详解

    Windows注册表内容详解 http://blog.sina.com.cn/s/blog_4d41e2690100q33v.html (2011-04-05 10:46:17)   第一课  注册表 ...

  9. Windows注册表内容详解（转载）

    (关于windows注册表的整理,来源网络) 前提 一.什么是注册表 ​ 注册表是windows操作系统.硬件设备以及客户应用程序得以正常运行和保存设置的核心"数据库",也可以说是 ...

随机推荐

  1. 深入理解es6（下）

    一.symbol javascript基本数据类型: null.undefined.number.boolean.string.symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无 ...

  2. Requests库详细的用法

    介绍 对了解一些爬虫的基本理念,掌握爬虫爬取的流程有所帮助.入门之后,我们就需要学习一些更加高级的内容和工具来方便我们的爬取.那么简单介绍一下 requests 库的基本用法 安装 利用 pip 安装 ...

  3. 使用sudo进行Linux权限升级技巧

    0x00 前言 在我们之前的文章中,我们讨论了如何使用SUID二进制文件和/etc/passwd 文件的Linux权限提升技巧,今天我们发布了另一种“使用Sudoers文件进行Linux权限提示技巧” ...

  4. Java 参数个数可变的函数

    示例: package my_package; public class Test { public static void main(String[] args) { out("重庆师范大 ...

  5. 为什么说pt-osc可能会引起主从延迟，有什么好办法解决或规避吗？

    若复制中binlog使用row格式,对大表使用pt-osc把数据从旧表拷贝到临时表,期间会产生大量的binlog,从而导致延时 pt-osc在搬数据过程中insert...select是有行锁的,会降 ...

  6. Python_类的私有属性、私有方法

    1.私有属性:只需要在初始化时,在属性名前加__ class Cup: #构造函数,初始化属性值 def __init__(self,capacity,color): #私有属性,只需要在属性名字前加 ...

  7. 计算机网络基础之IP地址详解

    计算机网络基础之IP地址详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.IP地址概述 1>.什么是IP地址 我们为什么要使用逻辑地址(IP地址)来标识网络设备,而不采 ...

  8. 详细点的Mysql主从同步

    .说明 此操作文档,如果在master机器已开启bin-log及设定好server-id的情况下,可以不锁表,不停机的实现master-slave同步.这一同步可以将master上已有数据同步到sla ...

  9. Kotlin异常与Java异常的区别及注解详解

    Kotlin异常与Java异常的区别: throw的Kotlin中是个表达式,这样我们可以将throw作为Elvis表达式[val test = aa ?: bb,这样的则为Elvis表达式,表示如果 ...

  10. JVM垃圾回收算法分析与演示【纯理论】

    继续接着上一次[https://www.cnblogs.com/webor2006/p/10729649.html]的来学习,上次在结尾处提到了JVM常见的GC算法,如下: 接下来则逐一的对其进行学习 ...