<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>jq_Demo1</title>

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

     </head>

     <body>

         <select id="province">

             <option value="-1">请选择</option>

         </select>

         <select id="city">

             <option value="-1">请选择</option>

         </select>

     </body>

     <script type="text/javascript">

         $(function(){

             var pro=["广东","广西","福建"];

             var ci=[["广州","深圳","珠海"],["南宁","玉林","桂林"],["莆田","福州","厦门"]];

             //将数组中省份假入到选择项中去

             $(pro).each(function(i,v){

                 $("#province").append("<option value='"+i+"'>"+v+"</option>");

             });

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

                 //每次选择省份之后都还原

                 $("#city").html("<option value='-1'>请选择</option>")

                 //获取省份的索引值

                 var proIndex=this.value;

 //                alert(proIndex);

                 //根据索引值遍历城市

                 $(ci[proIndex]).each(function(i,v){

                     $("#city").append("<option value='+i+'>"+v+"</option>");

                 });

             });

         });

     </script>

 </html>

执行结果：

2、使用已经编好的js，代码直接调用。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>jq_Demo2</title>

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

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

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

     </head>

     <body>

         <div id="province">

         </div>

     </body>

     <script type="text/javascript">

         $("#province").ProvinceCity();

     </script>

 </html>

执行结果：

jQuery 省份选择的更多相关文章

  1. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  2. JQUERY 模糊选择

    JQUERY 模糊选择        [属性名称]         匹配包含给定属性的元素      [att=value]       匹配包含给定属性的元素      [att*=value]   ...

  3. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. jquery中选择checkbox拼接成字符串，然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

  5. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  6. JQuery实现选择特定楼层回复

    JQuery实现选择特定楼层回复 需求: 一个论坛里面的小功能,除了回复帖子之外,也能够回复帖子以下的回复.详细实现细节: 每个回复有一个"回复"按钮,点击按钮实现: 在form表 ...

  7. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  8. jQuery应用之（二）使用jQuery管理选择结果（荐）

    使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度.查找某个元素,截取某个段落等. 1.获取元素的个数. 在jQuery中可以通过size()方法 ...

  9. jquery input选择弹框

    index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...

随机推荐

  1. Spark入门到精通--（第一节）Spark的前世今生

    最近由于公司慢慢往spark方面开始转型,本人也开始学习,今后陆续会更新一些spark学习的新的体会,希望能够和大家一起分享和进步. Spark是什么? Apache Spark™ is a fast ...

  2. Centos7+python3.6+face-recognition

    Step1 安装Python3.6.xhttps://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set- ...

  3. 颜色模式、DPI和PPI、位图和矢量图

    颜色模式:用于显示和打印图像的颜色模型 RGB:电子设备的颜色 CMYF:印刷的颜色 印刷的图像分辨率大于等于120像素/厘米,300像素每英寸 图像分辨率单位为PPI(每英寸像素Pixel per ...

  4. Mac破解免费office软件

    一.下载安装包及破解工具 地址: https://pan.baidu.com/s/1hugtoLQ 密码: s5in 附官网地址 文件夹中包含三个文件: Office16安装文件 Microsoft_ ...

  5. Java-idea-安装配置优化等

    1.属性配置 使用版本,winzip解压版,开发工具安装目录下idea.properties文件,自定义配置路径 # idea.config.path=${user.home}/.IntelliJId ...

  6. C语言进阶之路（一）----C语言的内存四区模型

    内存四区模型:操作系统给C/C++编写的程序分配内存,通常将分配的内存划分为以下四个区域:1.栈区:存放局部变量,用完由操作系统自动释放2.堆区:动态分配给程序的内存区域,由程序员手动释放3.数据区: ...

  7. VCS

    timing check相关的, +notimingcheck命令,可以用在compile时,也可以用在run time的时候, 都是将检查timing的系统函数,都disable掉了, 加在comp ...

  8. Apriori

    基本概念 项与项集:设itemset={item1, item_2, …, item_m}是所有项的集合,其中,item_k(k=1,2,…,m)成为项.项的集合称为项集(itemset),包含k个项 ...

  9. 编辑器之神---vim

    1. 不是在命令模式下时:yy   -----复制光标所在的这一行              p  ----粘贴      dd  -----剪切光标所在的行 D ---从当前的光标开始剪切,一直到行 ...

  10. Centos7 升级 Ruby

    Centos7通过yum 安装的Ruby 是2.0版本.版本较低,需要升级到2.5以上版本. #yum 安装ruby yum install ruby #查看ruby版本 ruby -v 以下开始升级 ...