<!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. 【Python全栈-后端开发】Django进阶之Model操作复习

    Django进阶之Model操作复习 一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - ...

  2. 解决web资源跨域请求问题

    参考地址: http://my.oschina.net/lichaoqiang/blog/317823 在浏览器请求中,出现跨域访问资源的问题,我们肯定会遇到.如果跨域请求被阻止,有可能导致css.j ...

  3. 13.0-uC/OS-III上下文切换

    1.当uC/OS-III转向执行另一个任务的时候,它保存了当前任务的CPU寄存器到堆栈.并从新任务的的堆栈中CPU寄存器载入CPU.这个过程叫做上下文切换. 上下文切换需要一些开支. CPU的寄存器越 ...

  4. HttpWebRequest请求http1.1的chunked的解析问题记录

    问题:我的请求获取不到URL对应的内容(换个浏览器可以). 第一步对比wirshark截包看HTTP请求头,发现我这缺失一部分请求头. 对着官方文档添加即可.https://msdn.microsof ...

  5. random函数的使用

    random作为随机函数用处很多,在Python里面也经常使用,特别是处理一些随机事件的时候,特别好用! 废话不多说,直接看下面的例子: random.randomrandom.random()   ...

  6. HDU 3033 分组背包(至少选一个)

    分组背包(至少选一个) 我真的搞不懂为什么,所以现在就只能当作是模板来用吧 如果有大牛看见 希望评论告诉我 &代码: #include <cstdio> #include < ...

  7. shell中输出日期的一个函数

    开始 function T () { date '+%F %T.%N' } 结束

  8. linux 生成密钥,并向git服务器导入公钥

    1.      server1 上使用haieradmin用户 ,先清理之前的ssh登录记录,rm –rf ~/.ssh , 运行ssh-keygen –t rsa(只需回车下一步即可,无需输入任何密 ...

  9. C# AsyncCallback异步回调用法示例

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  10. 【转】jira迁移数据

    jira迁移数据有两种方式 方式一: jira系统自带的备份恢复操作 最简单的,但不一定能成功   从/export/atlassian/application-data/jira/export下载至 ...