//动态创建省市二级联动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province" onchange="func1(this)">

</select>
<select id="city">

</select>
</body>
<script>
    data={"河北省":["邯郸","廊坊"],"北京":["海淀","朝阳"],"山东省":["青岛","济南"]}
    var pro=document.getElementById("province"); //先拿到select的省级对象
    var city=document.getElementById("city"); //拿到市级对象
        var option_pro=document.createElement("option")  //创建标签
        option_pro.innerHTML=i;   //往标签里添加省份
        pro.appendChild(option_pro);   //往父标签pro里加option_pro标签
    }
    function func1(self) {   //定义事件函数---目的是拿到被先中的省份，才能对应城市添加到其中
        //拿到options数组.数组的索引.拿到标签对象里的文本
        var choice=(self.options[self.selectedIndex]).innerHTML;
       city.options.length=0;
       for (var i in data[choice]) {
           var option_city=document.createElement("option");
           option_city.innerHTML=data[choice][i];
           city.appendChild(option_city)
       }
    }
</script>
</html>

js省市二级联动实例的更多相关文章

  1. js省市二级联动

    html: <script src="js/city.js"></script> ...... <body> <div class=&qu ...

  2. js 省市二级联动

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  3. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  4. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  5. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  6. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  7. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  8. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. Java实现 洛谷 P1049 装箱问题

    题目描述 有一个箱子容量为V(正整数0≤V≤20000),同时有n个物品(0<n≤30,每个物品有一个体积(正整数). 要求nn个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输入输出格 ...

  2. Java实现 LeetCode 674 最长连续递增序列（暴力）

    674. 最长连续递增序列 给定一个未经排序的整数数组,找到最长且连续的的递增序列. 示例 1: 输入: [1,3,5,4,7] 输出: 3 解释: 最长连续递增序列是 [1,3,5], 长度为3. ...

  3. java实现蓝桥杯密码脱落

    一 问题描述 X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远 ...

  4. Java实现第九届蓝桥杯三体攻击

    三体攻击 [题目描述] 三体人将对地球发起攻击.为了抵御攻击,地球人派出了 A × B × C 艘战舰,在太空中排成一个 A 层 B 行 C 列的立方体.其中,第 i 层第 j 行第 k 列的战舰(记 ...

  5. Java重置Mysql主键自增长值

    MySql 主键自增重置器(统一处理多个表) resetAutoincrement 是一款基于 Java 开发的程序,其功能为重置 mysql 数据库表的主键自增的值为最近的一个. 介绍 开发背景主要 ...

  6. Python学习之计算机基础

    计算机基础: (1)计算机俗称电脑,是现代用于高速计算的电子计算器,可以进行数值计算也可以进行逻辑计算,还有存储记忆功能.是能够按照程序运行,自动,高速处理海量数据的现代化智能 电子设备. (2)物理 ...

  7. KVM Web管理平台 WebVirtMgr

    WebVirtMgr介绍 WebVirtMgr是一个KVM管理平台,让kvm管理变得更为可视化,对中小型kvm应用场景带来了更多方便.WebVirtMgr采用几乎纯Python开发,其前端是基于Pyt ...

  8. hadoop知识整理（2）之MapReduce

    之前写的关于MR的文章的前半部分已丢. 所以下面重点从3个部分来谈MR: 1)Job任务执行过程,以及主要进程-ResourceManager和NodeManager作用: 2)shuffle过程: ...

  9. Remap 后的 USART1 不能发送数据

    最近在使用 STM32 的 USART1 时,遇到一点问题,记录一下. 如果 USART1 不是使用 PA9 和 PA10 作接收和发送引脚,而是 PB6 和 PB7,那么有一点就一定得注意了:此时 ...

  10. Codeforces Round #648 (Div. 2)

    链接 : https://codeforces.com/contest/1365/problems problem A 统计可用的行和列的最小值, 模2输出即可 /* * Author: RoccoS ...