<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript" src="js/jquery.min.js">    </script>

        <script>

        $(function(){

            $("#provinceId").change(function(){

                var arr = [["郑州","开封","洛阳"],["济南","青岛","淄博"],["东城","西城","海淀"]];

                $("#cityId").html("<option>选择城市</option>")

                var index = this.selectedIndex;

                if(index != 0){

                     var citys = $.each(arr[index-1], function(i,obj) {

                     var $newOp = $("<option>"+obj+"</option>");

                     $("#cityId").append($newOp);

                    });

                }else{

                    $("#cityId").html("<option>选择---城市</option>")

                }

            });

        });

        </script>

    </head>

    <body>

        <div align="center">

        <select id="provinceId">

            <option>选择省份</option>

            <option>河南</option>

            <option>山东</option>

            <option>北京</option>

        </select>

        <select id="cityId">

            <option>选择城市</option>

        </select>

        </div>

    </body>

</html>

20行核心代码:jQuery实现省市二级联动的更多相关文章

  1. jquery 实现省市二级联动，附带完整的省市json数据 （粘贴即用）

    1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...

  2. jquery 实现省市二级联动

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  4. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  5. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 20行Python代码爬取王者荣耀全英雄皮肤

    引言王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. 准备工作 ...

  7. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  8. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  9. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

随机推荐

  1. 分布式事务_03_2PC框架raincat源码解析-事务提交过程

    一.前言 前面两节,我们已经将raincat的demo工程启动,并简单分析了下事务协调者与事务参与者的启动过程. 这一节,我们来看下raincat的事务提交过程. 二.事务提交过程概览 1.二阶段对应 ...

  2. rabbitmq_学习_00_资源帖

    一.精选资料 二.参考资料 1.RabbitMQ Simplest Queue 2.RabbitMQ系列教程 2.RabbitMQ入门教程 For Java[1] - Hello World 2.Ra ...

  3. New Concept English three （52）

    My cousin, Harry, keeps a large curiously-shaped bottle on permanent display in his study. Despite t ...

  4. stl_hash_set.h

    stl_hash_set.h // Filename: stl_hash_set.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: ...

  5. MySQL实战 | 06/07 简单说说MySQL中的锁

    原文链接:MySQL实战 | 06/07 简单说说MySQL中的锁 本文思维导图:https://mubu.com/doc/AOa-5t-IsG 锁是计算机协调多个进程或纯线程并发访问某一资源的机制. ...

  6. 畅通工程再续 （kruskal算法的延续）

    个人心得:这题其实跟上一题没什么区别,自己想办法把坐标啥的都给转换为对应的图形模样就好了 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实 ...

  7. LeetCode 336. Palindrome Pairs

    原题链接在这里:https://leetcode.com/problems/palindrome-pairs/ 题目: Given a list of unique words, find all p ...

  8. 洛谷 P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper

    题目描述 A little known fact about Bessie and friends is that they love stair climbing races. A better k ...

  9. 开始写博客，与ITer们互相学习

    学习计算机也6年了,一直待在学校里.这些年来很多学习资料都来自网络上的技术博客,非常感谢各位 ITer 的分享精神,鄙人从中受益匪浅.从今天起也挤出时间开始写技术博客.主要是把自己这些年的一些技术文档 ...

  10. Unix文件指令-Mac终端命令应用

    pwd:查看当前文件夹 cd: 打开文件夹 ls:列出当前路径下所有文件 ls -l :列出当前路径下的所有文件详细信息. mkdir: 新建文件夹 touch: 创建文件   eg: touch t ...