<!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. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  2. procfs、debugfs

    procfs 是进程文件系统(file system) 的缩写,包含一个伪文件系统,用于通过内核访问进程信息 这个文件系统通常被挂载到 /proc 目录.由于 /proc 不是一个真正的文件系统,它也 ...

  3. Android笔记(七十六) 点菜DEMO

    一个朋友让看一下他的代码,一个点菜的功能,他和我一样,初学者,代码比我的都混乱,也是醉了,干脆想着自己写个demo给他看,原本想着听简单,半个小时应该就可以搞定,真正写的时候,画了3h+,汗颜... ...

  4. Django-模型层(单表操作)

    目录 1.ORM简介 2.单表操作 2.1创建表 2.2添加表纪录 2.3查询表纪录 2.4删除表纪录 2.5修改表纪录 1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了 ...

  5. thymeleaf模板、thymeleaf语法相关中文文档教程

    thymeleaf模板在SpringBoot中是默认的模范引擎技术,SpringBoot不推荐使用比较老旧的jsp.但如果您想使用jsp的话,当然也可以.我这里为您讲述thymeleaf模板的基本th ...

  6. Linux常用命令学习一

    rpm -qa |grep jdk:查询系统中是否有存在jdk的rpm已安装程序: rpm -e --nodeps jdk1.8:卸载jdk1.8的程序: rpm -ivh rpm文件:安装rpm文件 ...

  7. Python开发应用-正则表达进行排序搜索

    re模块提供了3个方法对输入的字符串进行确切的查询,match和search最多只会返回一个匹配条件的子串,可以理解为非贪婪模式,而findall会返回N个匹配条件的子串,可以理解为贪婪模式 re.m ...

  8. jmeter-多用户循环执行（存储token）

    1.从cvs文件中读取数据 登录接口读取文件: 2.读取token,保存token 在登录接口下添加 设置: 把token保存为全局变量: 设置: 输入${__setProperty(newtoken ...

  9. CodeForces - 115E：Linear Kingdom Races （DP+线段树+lazy）

    pro: 从左到有有N个车道,都有一定程度损坏,所以有不同的修理费a[]: 有M场比赛,每场比赛的场地是[Li,Ri],即如果这个区间的车道都被修理好,则可以举办这个比赛,并且收益是Pi.问最多得到多 ...

  10. createTextRange 创建文本对象

    document.body.createTextRange 主要是用来对一些文本对象进行操作.比如你有一大段文字,都在同一个P标签内,但是你只希望通过JS改变其中的一小部分,这时就可以用createT ...