//动态创建省市二级联动
<!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 729 我的日程安排表 I（二叉树）

    729. 我的日程安排表 I 实现一个 MyCalendar 类来存放你的日程安排.如果要添加的时间内没有其他安排,则可以存储这个新的日程安排. MyCalendar 有一个 book(int sta ...

  2. Java实现 LeetCode 374 猜数字大小

    374. 猜数字大小 我们正在玩一个猜数字游戏. 游戏规则如下: 我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字. 每次你猜错了,我会告诉你这个数字是大了还是小了. 你调用一个预先定义好的 ...

  3. Java实现 LeetCode 126 单词接龙 II

    126. 单词接龙 II 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出所有从 beginWord 到 endWord 的最短转换序列.转换需遵循如下规则: ...

  4. Java实现 LeetCode 137 只出现一次的数字

    public static int singleNumber(int[] nums) { int res = 0; for(int i=0;i<nums.length;i++) res ^= n ...

  5. ntpq无法查询同步信息，显示The specified class was not found

    年初时工班发现工作站和服务器都没办法用ntpq看时钟同步了,如下图所示.输入ntpq-p 就显示"The specified class was not found" 通过排查,发 ...

  6. 经典文本特征表示方法: TF-IDF

    引言 在信息检索, 文本挖掘和自然语言处理领域, IF-IDF 这个名字, 从它在 20 世纪 70 年代初被发明, 已名震江湖近半个世纪而不曾衰歇. 它表示的简单性, 应用的有效性, 使得它成为不同 ...

  7. GIT 仓库的搭建

    1.安装并配置必要的依赖关系 在CentOS 7(和RedHat / Oracle / Scientific Linux 7)上,以下命令还将在系统防火墙中打开HTTP和SSH访问. yum inst ...

  8. SpringSceurity(4)---短信验证码功能实现

    SpringSceurity(4)---短信验证码功能实现 有关SpringSceurity系列之前有写文章 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSecur ...

  9. JDK Base64编解码1.7和1.8的坑

    场景 对接一个第三方api接口,其中签名部分用的是JDK8的编码.我们线上采用JDK7,导致项目无法编译 替换编解码部分为1.7的代码,然后签名又不对 所以坑就在这里,结论,1.7的编解码有换行符导致 ...

  10. @codefoces - 1313E@ Concatenation with intersection

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定两个长度为 n 的字符串 a, b 与一个长度为 m 的字符 ...