<!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. 洛谷P1021邮票面值设计 [noip1999] dp+搜索

    正解:dfs+dp 解题报告: 传送门! 第一眼以为小凯的疑惑 ummm说实话没看标签我还真没想到正解:D 本来以为这么多年前的noip应该不会很难:D 看来还是太菜了鸭QAQ 然后听说题解都可以被6 ...

  2. c# Castle Windsor简单例子

    Windsor是Castle的IOC框架.需要用到两个dll(Castle.Core.dll和Castle.Windsor.dll). 1.接口以及接口实现类: public interface IT ...

  3. servlet-servlet的简单认识——源码解析

    Servlet的基本认识 本内容主要来源于<看透Spring MVC源码分析与实践——韩路彪>一书 Servlet是server+Applet的缩写,表示一个服务器的应用.Servlet其 ...

  4. 十、无事勿扰，有事通知（1）——NSNotification

    概述 很久很久以前,有一只菜鸟正在美滋滋的撸着他的嵌入式C代码.然而有一天,老板对菜鸟说:“别撸C了,从现在开始你就写swift开发ios了.”菜鸟一脸懵逼,但还是照做了. 又有一天,菜蛋谄媚的对菜鸟 ...

  5. cocos2d-x JS 本地玩家位置跟服务器玩家位置转换相关

    //各种游戏人数情况下的本地位置配置mb.LOCAL_POS_LIST = { 2 : [0, 2], 3 : [0, 1, 3], 4 : [0, 1, 2, 3]}; /*------------ ...

  6. 56.关于vue项目的seo问题

    不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...

  7. CentOS 7 之 Systemd 入门教程：实战篇

    开机启动对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件. 如果你想让该软件开机启动,就执行下面的命令(以httpd.ser ...

  8. 2017.11.10 重读C++ Primer

    第二章   变量和变量类型 1. C++ 算数类型 bool                     布尔 最小尺寸未定义 char                     字符 8位 wchar_t ...

  9. 『Numpy』np.meshgrid

    生成网格坐标,一个很好的说明图如下: 虽然xy双坐标比较常用,但实际上其输入可以是任意多的数组,输出数组数目等于输出数组数目,且彼此间shape一致. 如果输入数组不是一维的,会拉伸为1维进行计算. ...

  10. Fast Matrix Calculation HDU - 4965

    One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...