zoukankan      html  css  js  c++  java
  • js省市二级联动实例

    //动态创建省市二级联动
    <!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>
  • 相关阅读:
    注册审核
    静态表单验证
    多条件查询
    0623TP框架联系
    0618框架 增删改练习
    php框架 数据添加
    0616框架查询
    0614空操作方法 空控制器 跨控制器调用 命名空间
    php 0613框架基础
    php查询
  • 原文地址:https://www.cnblogs.com/dbslinux/p/11403424.html
Copyright © 2011-2022 走看看