//动态创建省市二级联动
<!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. 第七届蓝桥杯JavaB组国(决)赛部分真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.愤怒小鸟 题目描述 X星球愤怒的小鸟喜欢撞火车! 一根平直的铁轨上两火车间相距 1000 米 两火车 (不妨称A和B) 以时速 10米 ...

  2. java实现矩形区域的交和并

    在编写图形界面软件的时候,经常会遇到处理两个矩形的关系. 如图[1.jpg]所示,矩形的交集指的是:两个矩形重叠区的矩形,当然也可能不存在(参看[2.jpg]).两个矩形的并集指的是:能包含这两个矩形 ...

  3. java实现第七届蓝桥杯打靶

    打靶 题目描述 小明参加X星球的打靶比赛. 比赛使用电子感应计分系统.其中有一局,小明得了96分. 这局小明共打了6发子弹,没有脱靶. 但望远镜看过去,只有3个弹孔. 显然,有些子弹准确地穿过了前边的 ...

  4. [julia][学习笔记]julia的安装

    目录 julia的安装 下载地址 下载后安装 IDE Julia Pro 安装方法 使用方法(以hello world为例) vscode的Julia插件 下载vscode 安装vscode Juli ...

  5. Spark Streaming + Kafka Integration Guide原文翻译及解析

    前面写了关于kafka和spark streaming的结合使用(https://www.cnblogs.com/qfxydtk/p/11662591.html),其具体使用用法其实来自于原文:htt ...

  6. CentOS7——初始化

    CentOS7--初始化 #禁止关闭显示器 archlinux wiki 提及的方法 echo -ne "\033[9;0]" >> /etc/issue # 重启,c ...

  7. boost常用库(一):boost数值转换

    在STL中有一些字符转换函数,例如atoi,itoa等,在boost里面只需用一个函数lexical_cast进行转换,lexical_cast是模板方法,使用时需要传入类型.只能是数值类型转字符串. ...

  8. 171.Excel列表序号

    2020-03-17 Excel表列序号 A -> 1. B -> 2 Z -> 26 AA -> 27 ZY -> 701 示例: 输入: s = "LEET ...

  9. IDEA环境Spring Boot 2.3整合Activiti 6.0，启动项目初始化表并创建核心服务

    如下步骤照着抄就完事了. 一.新建一个spring boot项目,并引入相关依赖 <?xml version="1.0" encoding="UTF-8" ...

  10. grafana repeat 特性

    1.设置变量 成功后会自动复制变量值个数的的画图板 类似下图 设置后是不能与预览结果的,需要保存后 切换到其他dashboard 再切换回来就可以看见了 官方文档repeat说明