//动态创建省市二级联动
<!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实现 蓝桥杯 算法提高 队列操作

    算法提高 队列操作 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. 输入格式 ...

  2. Java实现二阶魔方旋转

    魔方可以对它的6个面自由旋转. 我们来操作一个2阶魔方(如图1所示): 为了描述方便,我们为它建立了坐标系. 各个面的初始状态如下: x轴正向:绿 x轴反向:蓝 y轴正向:红 y轴反向:橙 z轴正向: ...

  3. java实现第四届蓝桥杯公式求值

    公式求值 输入n, m, k,输出图1所示的公式的值.其中C_n^m是组合数,表示在n个人的集合中选出m个人组成一个集合的方案数.组合数的计算公式如图2所示. 输入的第一行包含一个整数n:第二行包含一 ...

  4. 数据结构&算法

    20个最常用.最基础数据结构与算法: 10个数据结构:数组.链表.栈.队列.散列表.二叉树.堆.跳表.图.Trie 树. 10个 算法      :递归.排序.二分查找.搜索.哈希.贪心.分治.回溯. ...

  5. 【华为云技术分享】数据库开发：MySQL Seconds_Behind_Master简要分析

    [摘要]对于mysql主备实例,seconds_behind_master是衡量master与slave之间延时的一个重要参数.通过在slave上执行"show slave status;& ...

  6. mysql域名解析引起的远程访问过慢?

    MYSQL远程连接速度慢的解决方法 PHP远程连接MYSQL速度慢,有时远程连接到MYSQL用时4-20秒不等,本地连接MYSQL正常,出现这种问题的主要原因是, 默认安装的MYSQL开启了DNS的反 ...

  7. SpringBoot设置mysql的ssl连接

    因工作需要,mysql连接需要开启ssl认证,本文主要讲述客户端如何配置ssl连接. 开发环境信息: SpringBoot: 2.0.5.RELEASE mysql-connector-java: 8 ...

  8. [转] linux操作系统下c语言编程入门--基础知识

    点击阅读原文 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将会学到以下内容: 1. 源程序编译        2. Makefile的编写        3. 程序库 ...

  9. PyQt5常用控件及方法（代码段）

    文章目录PyQt5程序基本格式QMainWindow主窗口QLabel标签QTextBrowser文本浏览器QTextEdit文本编辑器QPushButton按键QCheckBox复选框QRadioB ...

  10. Shell总结01-shell解释器

    常见Shell解释器种类 就像不同地区有不同方言一样,不同的Linux/Unix系统使用着不同类型的shell,其中sh是UNIX上的最基本的shell,遵循POSIX接口规范 操作系统 默认shel ...