<!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. js数组【续】(相关方法)

    一.数组的栈,队列方法[调用这些方法原数组会发生改变]var arr = [2,3,4,5,6];1.栈 LIFO (Last-In-First-Out)a.push() 可接受任意类型的参数,将它们 ...

  2. python关于try except的使用方法

    一.常见错误总结 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x IOError 输入/输出异常;基本上是无法打开文件 ImportError 无法引入 ...

  3. 笔谈 cocoapods的安装与使用

    因为要重构播放器库,所以就需要参考网上的开源项目,在播放器开源项目这块,kxmovie开源项目是值得参考的一个项目.在github下载下来后,运行该工程,发现其用到了cocoapods来管理第三方库, ...

  4. springboot使用RestHighLevelClient7简单操作ElasticSearch7增删查改/索引创建

    本次操作是在  Windows上安装ElasticSearch7  进行操作 导入依赖 <?xml version="1.0" encoding="UTF-8&qu ...

  5. Java里面获取当前服务器(linux环境)的IP地址--与请求者的真实IP

    package com.wfd360.Util; import javax.servlet.http.HttpServletRequest; import java.net.Inet4Address; ...

  6. Linux 系统安全相关

    本篇关于Linux的一些安全知识,主要就是与账号相关的安全. 账户文件锁定 当服务器中的用户账号已经固定,不在进行更改,可锁定账户文件.锁定后,无法添加.删除账号,也无法更改密码等. 锁定账户文件 c ...

  7. MYSQL中常见的时间处理

    use test; select getdate() select sysdate(); select now(); select current_timestamp select current_t ...

  8. Python +appium baseview

    封装python+appium 的baseview模块 from selenium.webdriver.support.ui import WebDriverWait from time import ...

  9. ArcGIS pro 发布地图服务（一）动态地图服务

    1.软件:arcgis pro 2.4  数据:.mxd文档. 2.导入mxd文档. 3.登录portal账号 4.分析—发布 5.在server中的地图服务 JavaScript api 查看 6. ...

  10. hexo博客微博图床失效解决办法

    最近在v2ex上看到有人说微博图床开始限制外链了.当时我看了看我的博客,图片还好.第二天再去看的时候就挂了.评论里有人说改一个no-ferrer能解决. 记录一下操作方法. N:\blog\theme ...