<!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. LaTeX大于小于号

    发现大部分人只回答大于等于号.小于等于号的写法,而没有说大于.小于号的分别写法. 大于号:\textgreater 小于号: \textless 下面的后面要加空格,否则会识别错误 大于等于:\geq ...

  2. MAC OS X&Vmware

    推出共享文件恢复解决办法: 将/Volumes/VMware shared Folders 文件删除(此时这个文件中的内容为乱码) ,生成一个 VMware shared Folders文件夹,重新设 ...

  3. Centos7下搭建LAMP环境，安装wordpress（不会生产博客，只是一名博客搬运工）(菜鸟)

    1.搭建MySQL数据库 安装MariaDB yum install mariadb-server -y 启动MySQL服务 emctl start mariadb #启动服务 emtcl enabl ...

  4. WIN7搭建ASP站点

    在WIN7配置IIS用于搭建ASP站点(非ASP.NET) ,仅安装.配置必要文件. 1.安装IIS管理工具,用于支持静态页面. 2.添加匿名访问权限. 搭建站点指定到特定文件夹,浏览静态页面会报如下 ...

  5. [elk]elasticsearch dsl语句

    例子1 统计1,有唱歌兴趣的 2,按年龄分组 3,求每组平均年龄 4,按平均年龄降序排序 sql转为dsl例子 # 每种型号车的颜色数 > 1的 SELECT model,COUNT(DISTI ...

  6. MD5在线加密的应用

    MD5是message-digest algorithm 5(信息-摘要算法)的缩写.被广泛用于加密和解密技术上,是文件的“数字指纹”.可以对用户的密码进行加密操作,是不可逆的,所以用户输入的密码经过 ...

  7. upload-labs

    upload-labs是一个和sqli-labs类似的靶场平台,只不过是一个专门学习文件上传的.整理的很好,虽然并不能将服务器解析漏洞考虑进去,但毕竟一个靶场不可能多个web容器吧,关键是思路很重要, ...

  8. PowerShell 语法备忘

    1.挡可能出现 .0 的时候需要加上引号 2.使用 -Join 或者 + 进行字符串拼接 3.在cmd 命令下可以使用 set /a  s=1+2  表示需要进行计算,而不是拼接

  9. Windows下静态库与动态库的创建与使用

    Windows下静态库与动态库的创建与使用 学习内容:本博客介绍了Windows下使用Visual C++ 6.0制作与使用静态库与动态库的方法. --------CONTENTS-------- 一 ...

  10. Android Studio 添加已经移除的Module

    Android Studio 删除Module时,需要先在Project Structure中点击“-”来移除,此时小手机图标消失,但是这个时候Module并没有在硬盘中删除,只是和这个Project ...