<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>列表框中事件应用</title>

     <script src="jquery-2.1.0.js"></script>

     <style type="text/css">

         body {

             font-size:13px;

         }

         .clsInit {

             width:435px;

             height:35px;

             line-height:35px;

             padding-left:10px;

         }

         .clsTip {

             padding-top:5px;

             background-color:#00ffff;

             display:none;

         }

         .btn {

             border: 1px solid #666;

             padding: 2px;

             width: 65px;

             float: right;

             margin-top: 6px;

             margin-right: 5px;

             filter: progid:DxImageTransForm.Microsoft.Oradient(GradientType=0,StartColorStr=#fffff,EndColorStr=#ECE9D8);

         }

     </style>

     <script type="text/javascript">

         $(function () {

             function objInt(obj) {

                 return $(obj).html("<option>请选择</option>");

             }

             var arrData = {

                 厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },

                 厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2-1,型号2_2_2" },

                 厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3-2-1,型号3_2_2" },

             };

             $.each(arrData, function (pF) {

                 $("#sleF").append("<option>" + pF + "</option>");

             });

             $("#sleF").change(function () {

                 objInt("#sleT");

                 objInt("#sleC");

                 $.each(arrData, function (pF, pS) {

                     if ($("#sleF option:selected").text() == pF) {

                         $.each(pS, function (pT, pC) {

                             $("#sleT").append("<option>" + pT + "</option>");

                         });

                         $("#sleT").change(function () {

                             objInt("#sleC");

                             $.each(pS, function (pT, pC) {

                                 if ($("#sleT option:selected").text() == pT) {

                                     $.each(pC.split(","), function () {

                                         $("#sleC").append("<option>" + this + "</option>");

                                     });

                                 }

                             });

                         });

                     }

                 });

             });

             $("#Button1").click(function () {

                 var strValue = "你选择的：";

                 strValue += $("#sleF option:selected").text();

                 strValue += "你的品牌为：";

                 strValue += $("#sleT option:selected").text();

                 strValue += "你的型号为：";

                 strValue += $("#sleC option:selected").text();

                 $("#divTip").show().addClass("clsTip").html(strValue);

             });

         })

     </script>

 </head>

 <body>

     <div class="clsInit">

         厂商:<select id="sleF"><option>请选择</option></select>

         品牌:<select id="sleT"><option>请选择</option></select>

         型号:<select id="sleC"><option>请选择</option></select>

         <input id="Button1" type="button" value="查询" class="btn" />

     </div>

     <div class="clsInit" id="divTip"></div>

 </body>

 </html>

JQuery中的省市联动的更多相关文章

  1. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  2. 基于jQuery+JSON的省市联动效果

    省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...

  3. JQuery+Ajax制作省市联动

    $(document).ready(function () { $("#Province").append("<option value=''>" ...

  4. fragment 中利用spinner实现省市联动

    (1)布局文件就不在说明了,主要说代码的实现,先把代码贴上! package com.example.cl; import android.annotation.SuppressLint; impor ...

  5. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  6. jQuery实现省市联动

    未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...

  7. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

  8. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  9. 用jquery实现省市联动

    <!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...

随机推荐

  1. Java Load Properties 文件，定义message信息

    初始化Properties对象,load properties文件: private static final Properties MESSAGERESOURCES = new Properties ...

  2. canvas元素大小与绘图表面大小

    原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...

  3. PHP内置Web Server探究（一）启动Cli_Server

    自PHP5.4之后 PHP内置了一个Web 服务器(cli_server),类似于Python的内置server一样,方便我们开发阶段的调试 主要使用场景: 1,没有搭建nginx或apache等第三 ...

  4. WordPress插件制作教程(二): 编写一个简单的插件

    上一篇说到了如何创建一个插件,我想大家看了之后一定会有所收获,这一篇简单给大家写一个插件样例,让大家有一个基本的印象.这个插件的样例就是当你激活这个插件后会在你的每篇文章中插入一段自己定义好的内容,比 ...

  5. mysql查询unicode字符串

    mysql查询的时候会将\干掉,可以用mysql的like通配符来做like '%\u5f20\u4e09%'变成like '%_u5f20_u4e09%'

  6. jquery取元素值

    var j = 1; if (rows.length > 0) { for (var i = 0; i < rows.length; i++) { var row = rows[i]; i ...

  7. redhat 5下源码安装nginx服务

    首先确保机器中已安装 gcc c++,libtool等工具,保证可执行源码安装 A.为了确保能在 Nginx 中使用正则表达式进行更灵活的配置,安装之前需要确定系统是否安装有 PCRE(Perl Co ...

  8. jQuery图片延迟加载插件

    在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量. 使用图片延时加载插件就解决这些问题. 方法: 引入jquery和插件文件 <script src="jq ...

  9. Codeforces 582B Once Again

    http://codeforces.com/contest/582/problem/B 题目大意:给出一个序列,是由一个长度为n的序列复制T次得到的,问最长非下降子序列的长度. 思路:我们建立一个n* ...

  10. LightOj 1230 Placing Lampposts(树形DP)

    题意:给定一个森林.每个节点上安装一个灯可以覆盖与该节点相连的所有边.选择最少的节点数num覆盖所有的边.在num最小的前提下,合理放置num个灯使得被两个灯覆盖的边最多? 思路:F[i][0]代表没 ...