<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta charset="utf-8">

<title>dispatchEvent示例用法</title>

<script type="text/javascript">

var provinces = new Array();

provinces["陕西"] = ["西安","咸阳","宝鸡","延安","汉中"];

provinces["台湾"] = ["台北","台中","台南"];

provinces["浙江"] = ["杭州","宁波","绍兴","温州"];

console.log(provinces);

function provinceChange()

{

    console.log("onChange is triggered.");

    var prov = document.getElementById("province").value;

    var cityObj = document.getElementById("city");

    cityObj.options.length =;

    for(var i in provinces[prov])

    {

        cityObj.options.add(new Option(provinces[prov][i],provinces[prov][i]));

    }

}

window.onload = function(){

    var provinceObj = document.getElementById("province");

    for(var index in provinces)

    {

        provinceObj.options.add(new Option(index,index));

    }

    var event = document.createEvent('HTMLEvents');

    event.initEvent("change", true, true);

    event.eventType = 'message';

    provinceObj.dispatchEvent(event);

};

</script>

</head>

<body>

省份:<select id="province" onchange= "provinceChange()"></select>

城市:<select id="city"></select>

</body>

</html>

js实现 多级联动的更多相关文章

  1. Js 实现五级联动

    js实现多级联动的方法很多,这里给出⼀种5级联动的例子,其实可以扩展成N级联动,在做项目的时候碰到了这样⼀个问题但是有不能从数据库中动态的加载这些选项,所以只有想办法从单个的页面着手来处理了,应为项目 ...

  2. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  3. 微信小程序-多级联动

    微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...

  4. PHP多级联动的学习（一）

    我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...

  5. [ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

  6. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  7. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  8. MVC实现多级联动

    前言 多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HT ...

  9. .net MVC 下拉多级联动及编辑

    多级联动实现,附源码.当前,部分代码是参与博客园其它网友. 新增,前台代码: <script src="~/Scripts/jquery-1.10.2.js">< ...

随机推荐

  1. CVPR 2020 三篇有趣的论文解读

    作者 | 文永亮 学校 | 哈尔滨工业大学(深圳) 研究方向 | 视频预测.时空序列预测 目录 AdderNet - 其实不需要这么多乘法 Deep Snake for Real-Time Insta ...

  2. 修改webserver站点用户组权限

    例如webserver站点目录为webtest 搭建nginxwebserver服务器的时候,默认的用户和用户组权限为nginx:nginx, 即nginx.conf 和php-frm.conf 中默 ...

  3. rabitmq + php

    消费者 <?php //配置信息 $conn_args = array( 'host' => '127.0.0.1', 'port' => '5672', 'login' => ...

  4. go 广度搜索案例（迷宫）

    package main import ( "fmt" "os" ) /* *将文档结构读入到切片中(二维数组) *row, col 行数 列数 (文档第一行数 ...

  5. [BUG]微信浏览器 iOS input 失焦页面不回弹

    描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...

  6. Open live Writer 直接发布wps文章，优点是可以带上图片

    官方网站: http://openlivewriter.org/ 博客园的设置里面的 MetaWeblog访问地址

  7. oracle中plsql练习题----查询姓为“SMITH”的员工信息，并输出其员工号、姓名、工资、部门号。 – –如果该员工不存在，则插入一条新记录，员工号为2012，员工姓名为“Smith”,工资为7500元，入职日期为“2002年3月5日”，部门号为50。 – –如果存在多个名“Smith”的员工，则输出所有名为“Smith”的员工号、姓名、工资、入职日期、部门号L。

    一.思路:首先判断这个查询的是emp表,需要接收值,声明一个rowtype类型接收数据即可,第二是,存在exception,需要处理,exception中有两种异常,分别处理即可,分别输出即可. 二. ...

  8. Python3学习之路~9.3 GIL、线程锁之Lock\Rlock\信号量、Event

    一 Python GIL(Global Interpreter Lock) 全局解释器锁 如果一个主机是单核,此时同时启动10个线程,由于CPU执行了上下文的切换,让我们宏观上看上去它们是并行的,但实 ...

  9. 如何在win10下使用Ubuntu中的crontab自动执行任务

    win10下如何下载ubuntu 1.打开Microsoft Store,搜索ubuntu,选择其一(我选了第一个),点击获取,耐心等待安装即可:   2.安装完成可在开始栏找到:   使用cront ...

  10. 安装自动化测试工具webdriver与selenium模块

    webdriver是一个驱动,需要与selenium配合使用,selenium是自动化测试和爬虫的专业模块,对于不同的浏览器需要不同的webdriver,这里我用的是ubuntu19.10的系统,以p ...