<!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. 后台管理界面admin

    admin组件:展示数据表,快速的录入数据. 为了安全,可以在路由分发时修改下admin的名字.(一定要改) 1.不想使用英文,则在app里的settings修改一下(在最下面的位置) LANGUAG ...

  2. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

  3. Vue+element 实现文件导出xlsx格式

    傻瓜教程:   第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...

  4. Unity之显示fps功能

    如下: using UnityEngine; using System.Collections; public class ShowFpsOnGUI : MonoBehaviour { public ...

  5. excel 八位二进制转换为十六进制公式

    =BIN2HEX(C16&D16&E16&F16&G16&H16&I16&J16,2)

  6. Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4

    Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from https://repo.mave ...

  7. nodejieba中文分词

    var nodejieba = require("nodejieba"); console.log(nodejieba.extract("升职加薪,当上CEO,走上人生巅 ...

  8. too many open files问题

    linux环境下,程序运行时,出现了too many open files的错误. 通过名字就能看出来,是打开了太多的文件,超过了系统限制. ulimit -a 通过这个命令可以查看当前系统设置的最大 ...

  9. LSTMs 长短期记忆网络系列

    RNN的长期依赖问题 什么是长期依赖? 长期依赖是指当前系统的状态,可能受很长时间之前系统状态的影响,是RNN中无法解决的一个问题. 如果从(1) “ 这块冰糖味道真?”来预测下一个词,是很容易得出“ ...

  10. gitlab 迁移

    http://www.cnblogs.com/crysmile/p/9505527.html