<!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. MySQL-By孙胜利-sifangku.com

    一.数据库基本概念 数据库:信息存储的仓库,包括一系列的关系措施! 表:一个数据库中可以有若干张表(形式上你可以看出我们日常生活中建立的表) 字段:表里面的信息会分若干个栏目来存,这些栏目呢,我们在数 ...

  2. 【转】java 环境变量：path与classpath区别

    path指示java命令的路径,像javac.java.javaw等: classpath是javac编译器的一个环境变量,它的作用与import.package关键字有关,当你写下improt ja ...

  3. tf常见的损失函数（LOSS）汇总

    损失函数在机器学习中用于表示预测值与真实值之间的差距.一般而言,大多数机器学习模型都会通过一定的优化器来减小损失函数从而达到优化预测机器学习模型参数的目的. 哦豁,损失函数这么必要,那都存在什么损失函 ...

  4. maven 修改镜像为阿里淘宝源

    修改maven根目录下的conf文件夹中的setting.xml文件,(或者当前用户目录 的 .m2 目录下的 setting.xml 文件) 内容如下: <mirrors> <mi ...

  5. Flask入门很轻松 （一）

    转载请在文章开头附上原文链接地址:https://www.cnblogs.com/Sunzz/p/10956837.html Flask诞生于2010年,是Armin ronacher(人名)用 Py ...

  6. 02-CSS常用样式

    本篇主要介绍css的常用样式,以及网页布局相关知识.绝对定位和相对定位,盒子模型.css权重.以及css选择器: 绪论:CSS基本介绍 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开, ...

  7. H3C 802.11b/g工作频段划分图

  8. Linux基础命令-查看基本硬件信息

    Linux基础命令-查看基本硬件信息 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看CPU信息 [root@node101.yinzhengjie.org.cn ~]# l ...

  9. 攻防世界WEB高手进阶之python_template_injection

    python模板注入 看了一堆文章,也不是看的很明白,反而把题目做出来了 大概思路如下 简单探测 http://111.198.29.45:42611/{{7+7}} 返回 说明服务器执行了{{}}里 ...

  10. Codeforces C. Jzzhu and Cities（dijkstra最短路）

    题目描述: Jzzhu and Cities time limit per test 2 seconds memory limit per test 256 megabytes input stand ...