<!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. shell编程之awk命令详解

    shell编程之awk命令详解 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; out ...

  2. Flask项目示例目录

    Flask不同于Django,Django在创建程序时自动得到必要的目录文件,而Flask则只有一个空文件夹,所以关于Flask项目的目录我们需要自行配置. 首先利用pycharm创建一个项目,在根目 ...

  3. 通过android studio的gradle强制cmake输出命令详情

    https://stackoverflow.com/questions/43439549/force-cmake-in-verbose-mode-via-gradle-and-the-android- ...

  4. ORACLE中关于使用between在MyBatis中取不同的区间值和取反

    最近在项目中使用between取不同的区间值问题,由于区间跨度大,而且区间多,又是前端传过来的参数,所以使用in和exists比较麻烦.然后就考虑使用between.现将使用方法记录一下. 假如表有个 ...

  5. git----------git：如何让git识别我修改了文件夹名字和文件名字的大小写问题。

    修改每个项目里面的隐藏的.git文件里面的config文件.将箭头指的原本是true改成false.

  6. Linux. 计划任务 时间格式

    Linux. 计划任务 时间格式 在linux中执行指令:cat /etc/crontab 结果,如下图所示: 结果一目了然,不多说. 如有问题,欢迎纠正!!! 如有转载,请标明源处:https:// ...

  7. form提交所有数据

    HTML: <div class="panel"> <div class="panel-body"> <h3>完善简历< ...

  8. php – Laravel 5查询关系导致“调用成员函数addEagerConstraints()on null”错误（ 转载）

    php – Laravel 5查询关系导致“调用成员函数addEagerConstraints()on null”错误   我一直在尝试创建一个简单的用户管理系统,但在查询关系时不断遇到障碍.例如,我 ...

  9. shell bash-shell

    bash shell中的命令替换,`cmd`或者$(cmd). bash shell中的变量赋值,直接name = var:  (bash中的变量赋值不能中间有空格) 变量引用时,$name,如果na ...

  10. HDU - 6440 Dream 2018中国大学生程序设计竞赛 - 网络选拔赛

    给定的\(p\)是素数,要求给定一个加法运算表和乘法运算表,使\((m+n)^p = m^p +n^p(0 \leq m,n < p)\). 因为给定的p是素数,根据费马小定理得 \((m+n) ...