<!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. JMeter学习笔记（十八）——返回的响应数据出现中文乱码_解决方案

    一.问题描述 使用jmeter过程中遇到了请求返回的响应数据出现中文乱码 二.原因分析 当没有对响应数据or响应页面设置支持解析中文的编码时,JMeter则会以默认的ISO-8859-1格式解析,而其 ...

  2. 关于何时执行shiro AuthorizingRealm 里的 doGetAuthenticationInfo与doGetAuthorizationInfo

    1.doGetAuthenticationInfo执行时机如下 当调用Subject currentUser = SecurityUtils.getSubject(); currentUser.log ...

  3. maven学习笔记二(了解maven的基本命令)

    maven常用的命令 mvn archetype:create 创建Maven项目 mvn compile 编译源代码 mvn deploy 发布项目 mvn test-compile 编译测试源代码 ...

  4. Python +appium logger

    封装日志模块 import logging def get_log(): # 配置日志参数 logger = logging.getLogger() logger.setLevel(logging.I ...

  5. Rendering in UE4

    Intro Thinking performance. Identify the target framerate, aim your approach on hitting that target ...

  6. MacOS查看NGINX文件路径（配置文件、日志文件）

    使用 MacOS 经常发现 NGINX 路径不好找,后来发现一个很好的命令来查找: nginx -V 即可输出 NGINX 各文件夹的路径.

  7. python为什么要使用闭包

    为什么要使用闭包 闭包避免了使用全局变量,此外,闭包允许将函数与其所操作的某些数据(环境)关连起来.这一点与面向对象编程是非常类似的,在面对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个 ...

  8. python笔记38-使用zmail发各种邮件案例代码

    前言 本篇介绍使用zmail发各种格式的邮件,并运行成功的代码,小伙伴们只需更换自己的邮箱就可以运行起来了 content_text发送纯文本 先从最简单的发送纯文本的邮件开始,调通发送邮件的代码. ...

  9. P4560 [IOI2014]Wall 砖墙

    题目描述 给定一个长度为 nn且初始值全为 00的序列.你需要支持以下两种操作: Add L, R, hL,R,h:将序列 [L, R][L,R]内所有值小于 hh的元素都赋为 hh,此时不改变高度大 ...

  10. Linux代理服务器使用

    1. 介绍 代理(即网络代理)是一种特殊的网络服务, 允许一个网络终端(客户端)通过这个服务与另一个终端(服务器)进行非直接连接,从而提供服务. 其中, 提供代理的网络终端称为代理服务器(Proxy ...