//动态创建省市二级联动
<!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实现 LeetCode 237 删除链表中的节点

    237. 删除链表中的节点 请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将只被给定要求被删除的节点. 现有一个链表 – head = [4,5,1,9],它可以表示为: 示例 1: ...

  2. 第五届蓝桥杯JavaC组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.猜年龄 题目描述 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍" ...

  3. java实现第三届蓝桥杯地址格式转换

    地址格式转换 [编程题](满分21分) Excel是最常用的办公软件.每个单元格都有唯一的地址表示.比如:第12行第4列表示为:"D12",第5行第255列表示为"IU5 ...

  4. java实现第五届蓝桥杯锦标赛

    锦标赛 这题小编能力有限,还望大佬解决 题目描述 如果要在n个数据中挑选出第一大和第二大的数据(要求输出数据所在位置和值),使用什么方法比较的次数最少?我们可以从体育锦标赛中受到启发. 如图[1.pn ...

  5. 在树莓派3b or 3a or 4a or 4b上搭建OpenWebRX

    OpenWebRx OpenWebRX 项目提供了搭建WebSDR的解决方案,该项目基于 Python 编写,除了完全开源外,官方还提供了完备的技术文档.您只需要一台电脑或是树莓派,一个SDR设备和网 ...

  6. Flutter 中 GestureDetector 的使用误区

    在实际开发中,我们通常需要实现某个组件的更多点击事件.比如:原生的RaisedButton组件是无法响应诸如拖拽或是按下.抬起等细化的动作,它只有一个onPressed()方法来表示.当我们想实现这些 ...

  7. sql server 取多条数据的最大值

    实列: SELECT a.BillDate '[开票时间]', a.Hdbh '[运单号]', a.Status '运单状态', a.DisplayStatus '运单状态字', b.name '开票 ...

  8. UI 小白设计常用的Website

    网址 设计师导航网址(其实这个用好了,enough) 设计导航1 设计导航2 icon 阿里巴巴Iconfont flaticons icomoon Noun Project 图片(有时候就是灵魂) ...

  9. MySQL的LIKE模糊查询优化

    原文链接:https://www.cnblogs.com/whyat/p/10512797.html %xxx%这种方式对于数据量少的时候,我们倒可以随意用,但是数据量大的时候,我们就体验到了查询性能 ...

  10. Linux 安装指定jdk版本

    操作步骤 卸载系统自带jdk版本 1.查看安装的jdk rpm -qa | grep java 2.卸载系统自带jdk rpm -e --nodeps 包名 下载jdk 当前最新版本下载地址:http ...