<!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. php 执行结果可以直接重定向文件中

    将php中的echo输出到shell上的结果,重定向到文件中. php script.php >result.txt;

  2. UVALive 3708 Graveyard（思维题）

    将原有的每个雕塑的坐标位置,映射在一个总长为n+m的数轴上,设第一个点的坐标为0,(新的等分点必然有至少有一个和原来n等分的等分点重合,因为等分点可以等距的绕圆周旋转,总可以转到有至少一个重合的,不妨 ...

  3. BRICH

    一.简介 Brich是典型的基于层次的聚类算法.最大的特点就是适合数据量特别大的数据集,处理速度很快,因为该算法扫描一遍数据集. 该算法是利用了一个树状结构来快速聚类,该结构类似平衡B+树.每一个叶子 ...

  4. vector map迭代器失效解决方案

    vector : iter = container.erase(iter);    //erase的返回值是删除元素下一个元素的迭代器 vector<int>::iterator it = ...

  5. 真机环境spotlight光源丢失

    maya做好的模型生成的fbx,导入到unity之后,pc运行正常,到了ios真机上发现光线丢失,场景内物体都是暗暗的,查出来原因是spot光源丢失了,选中spot光源,在其Render Mode里, ...

  6. bzoj 5403 Marshland

    $n \leq 50$ sol: 放一个在 $x$ 处拐弯的 $L$ 形石头相当于在水平和垂直方向上各选一个与 $x$ 相邻的点,全局不能重复选 最小化危险度,相当于满足这些限制的情况下石头盖住的点危 ...

  7. java-05String课堂练习

    1.阅读以下代码查看输出结果 public class StringPool { public static void main(String args[]) { String s0="He ...

  8. LeetCode Perfect Number

    原题链接在这里:https://leetcode.com/problems/perfect-number/#/description 题目: We define the Perfect Number ...

  9. 洛谷 P1854 花店橱窗布置

    题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...

  10. 使用swing构建一个界面（包含flow ，Border，Grid，card ，scroll布局）

    package UI; import java.awt.BorderLayout;import java.awt.CardLayout;import java.awt.Cursor;import ja ...