js注册表单中实现地区选择效果

<!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>

原文地址:https://www.cnblogs.com/helloworldlx/p/8975829.html

时间: 2024-07-31 08:39:01

js注册表单中实现地区选择效果的相关文章

Js实现表单中的checkbox对勾选中效果

<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" /> <title>JS实现单个图片选中美化框</title> <style type="text/css"> body,

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

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

Js 向表单中添加多个元素

@{ ViewBag.title = "地图导航"; } @model YT.XWAJ.Public.Application.MapNavigation.Dto.MapNavigationManagementDto <div class="easyui-layout" data-options="fit: true,border: false"> <div data-options="region:'north'&qu

js 交换表单中值

<html> <head> <meta charset="utf-8" /> <script type="text/javascript"> window.onload=function(){ var btn=document.getElementById('btn'); var text=document.getElementById('text'); var sele=document.getElementById

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

<form id="form" action="" method="post"> <input type="hidden" name="selected" value="" /> <table class="conditionTable"> <tr> <td class="first">用

确定系统设置在注册表对应路径

windows系统中,注册表是个非常强大的系统编辑工具,几乎系统所有环境设置和变量都在注册表有对应的项和值.那么,对于任意一个系统设置,我们该如何知道其在注册表对应的路径和值呢? 在这里我介绍一个工具,叫RegSnap,它可以找出系统设置在注册表对应的位置,这样就可以通过导入注册表的方式大批量修改系统设置了,既简单又高效.RegSnap工作原理很简单,分别对系统设置更改前后对注册表做一个快照,然后自己分析对比设置前后的注册表变化的项,我们就可以找到设置在注册表对应的路径了. 以实际操作举例,假设

win10获取注册表权限

1.cmd中输入regedit打开注册表 2.在需要的注册表项中右键选择“权限”

Putty的注册表设置

Putty是一款非常好用的远程管理Linux系统的工具,其主要具有以下几个优点: 完全免费; 在Windows 9x/NT/2000下运行的都非常好; 全面支持SSH1和SSH2: 绿色软件,无需安装,下载后在桌面建个快捷方式即可使用: 体积很小,仅519KB(0.67 版本): 操作简单,所有的操作都在一个控制面板中实现. 另外Putty和WinSCP的搭配使用更是强大和方便,但是Putty的默认界面让人很难受,而且每次打开Putty都会出现中文乱码问题,下面就介绍下永久配置Putty的方法,

Fort.js – 时尚、现代的进度提示效果

Fort.js 是表单填写进度提示效果的 JavaScript 库,使用非常简单. 提供了Default.Gradient.Sections 以及 Flash 四种效果 用Fort.js很简单,很简单.所有你要做的就是插入fort.min.js和fort.min.css到<head> 1 2 <link rel="stylesheet" href="fort.min.css"> <script src="fort.min.js