<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>省市联动</title>

     </head>

     <body>

         <select id="province" onchange="changeProvince(this.value)">

             <option value="0">-- 请选择 --</option>

             <option value="北京">北京</option>

             <option value="重庆">重庆</option>

             <option value="广东">广东</option>

         </select>

         <select id="city">

         </select>

     </body>

     <script type="text/javascript">

         // 获取city

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

         // 创建一个数组存储数据

         // 二维数组

         var arr = new Array(3);

         arr[0] = ["北京", "中关村", "朝阳区"];

         arr[1] = ["重庆", "梁平", "万州"];

         arr[2] = ["广东", "广州", "东莞"];

         function changeProvince(val) {

             // 清空city

             if (city.length > 0) {

                 var cities = city.getElementsByTagName("option");

                 for (var i = 0; i < cities.length; i++) {

                     city.remove(cities[i]);

                     i--;

                 }

             }

             for (var i = 0; i < arr.length; i++) {

                 var arrx = arr[i];

                 // 得到数组的第一个值

                 var province = arrx[0];

                 if (province == val) {

                     // 遍历arrx

                     for (var j = 1; j < arrx.length; j++) {

                         // 得到城市的名称

                         var p = arrx[j];

                         // 创建option

                         var option = document.createElement("option");

                         var text = document.createTextNode(p);

                         option.appendChild(text);

                         // 添加option到city

                         city.appendChild(option);

                     }

                 }

             }

         }

     </script>

 </html>

 

JavaScript基础4——省市联动的更多相关文章

  1. JavaScript(JS)实现省市联动选择下拉列表

    在开发一个应用的时候需要用刀省市联动的下拉列表,网上找到不少.但是要么太复杂,难以修改:要么根本就用不了,最后自己在一个示例中提取出数据,然后自己写了一个,简单易懂,适合新手... 代码如下: Pro ...

  2. JavaScript案例六：简单省市联动(NBA版)

    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...

  3. 通过Javascript数组设计一个省市联动菜单

    通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...

  4. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

  6. select省市联动选择城市 asp.net mvc4

    本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...

  7. 第三篇 JavaScript基础

    知识预览 BOM对象 DOM对象(DHTML) 实例练习 转:https://www.cnblogs.com/yuanchenqi/articles/5980312.html#_label2 一.Ja ...

  8. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  9. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

随机推荐

  1. linux运维、架构之路-MHA高可用方案

    一.软件介绍          MHA(master high   availability)目前是MySQL高可用方面是一个相对成熟的解决方案.在切换过程中,mha能做到0-30s内自动完成数据库的 ...

  2. vue-cli3热更新配置，解决热更新失败的问题，保存代码浏览器自动刷新

    在vue,config.js中配置css热更新 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) css: { ...

  3. 基于函数计算 + TensorFlow 的 Serverless AI 推理

    前言概述 本文介绍了使用函数计算部署深度学习 AI 推理的最佳实践, 其中包括使用 FUN 工具一键部署安装第三方依赖.一键部署.本地调试以及压测评估, 全方位展现函数计算的开发敏捷特性.自动弹性伸缩 ...

  4. mysql PRIMARY KEY约束 语法

    mysql PRIMARY KEY约束 语法 作用:PRIMARY KEY 约束唯一标识数据库表中的每条记录. 环形直线电机 说明:主键必须包含唯一的值.主键列不能包含 NULL 值.每个表都应该有一 ...

  5. [luogu]P1066 2^k进制数[数学][递推][高精度]

    [luogu]P1066 2^k进制数 题目描述 设r是个2^k 进制数,并满足以下条件: (1)r至少是个2位的2^k 进制数. (2)作为2^k 进制数,除最后一位外,r的每一位严格小于它右边相邻 ...

  6. Solr Windows环境安装配置

    在本章中,我们将讨论如何在Windows环境中设置Solr.要在Windows系统上安装Solr,需要按照以下步骤 - 访问Apache Solr的主页,然后点击下载按钮或直接访问:http://lu ...

  7. 170929-关于md5加密

    在各种应用系统中,如果需要设置账户,那么就会涉及到储存用户账户信息的问题,为了保证所储存账户信息的安全,通常会采用MD5加密的方式来,进行储存.首先,简单得介绍一下,什么是MD5加密. MD5的全称是 ...

  8. SpringBoot：配置文件及自动配置原理

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! SpringBoot ...

  9. 用shell和python实现数组的一个例子

    目标是把字符串中的值等分为几段,取每段固定位置的值 shell脚本 #!/bin/bash ele="1 2 3 4 5 6" n= array1=() for x in $ele ...

  10. zk的KeeperErrorCode = ConnectionLoss错误

    额,这东西都快把人搞崩溃了,各种排查各种正常. 最后竟然是因为我在客户端未连接上zkserver的时候就进行了create操作造成的错误. 噗, Exception in thread "m ...