参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body{
        font-size: 13px;
    }
    .clsInit{
        width: 450px;
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
    }
    .clsTip{
        padding-top: 5px;
        background-color: #eee;
        display: none;
    }
    .btn{
        border: 1px solid #666;
        padding: 2px;
        width: 65px;
        float: right;
        margin-top: 6px;
        margin-right: 6px;     
    }
    </style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
    $(function(){
        function objInit(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) {
            $("#selF").append("<option>"+pF+"</option>");
        });
   
        $("#selF").change(function() {
            objInit("#selT");
            objInit("#selC");
            $.each(arrData,function(pF, pS) {              
                if ($("#selF option:selected").text() == pF) {
                    //遍历数据增加品牌项
                    $.each(pS,function(pT,pC) {                    
                        $("#selT").append('<option>'+pT+'</option>');                      
                    });
   
                    //品牌列表change事件
                    $("#selT").change(function() {
                        objInit("#selC");
                        $.each(pS,function(pT, pC) {
                            if ($("#selT option:selected").text() == pT) {
                                $.each(pC.split(","),function() {
                                    $("#selC").append('<option>'+this+'</option>');
                                });
                            };
                        });
                    });                
   
                };
            });
        });
   
        $("#Button1").click(function() {
            var strValue = "您选择的是：";
            strValue += $("#selF option:selected").text();
            strValue += "&nbsp;&nbsp;品牌：";
            strValue += $("#selT option:selected").text();
            strValue += "&nbsp;&nbsp;型号：";
            strValue += $("#selC option:selected").text();
            $("#divTip").show().addClass('clsTip').html(strValue);
        });
   
    });
</script>
<title>jQuery实现select三级联动</title>
</head>
<body>
    <div class="clsInit">
        厂商：<select id="selF"><option>请选择</option></select>
        品牌：<select id="selT"><option>请选择</option></select>
        型号：<select id="selC"><option>请选择</option></select>
        <input id="Button1" type="button" value="查询" class="btn"/>
    </div>
    <div class="clsInit" id="divTip"></div>
</body>
</html>

jQuery实现select三级联动的更多相关文章

  1. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  2. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  3. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  4. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  5. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  6. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  7. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  8. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  9. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

随机推荐

  1. 使用sql语句创建 表空间 和用户，以及如何彻底删除表空间和用户，使用命令导出和导出数据库

    创建表空间有很多种方式,在安装好oracle 11g 后在网站上 https://localhost:1158/em 手动创建也可以,但是没有sql直接生成方便,下面介绍下如何用sql语句直接生成表空 ...

  2. 企业级hbase HA配置

    1 HBase介绍HBase是一个分布式的.面向列的开源数据库,就像Bigtable利用了Google文件系统(File System)所提供的分布式数据存储一样,HBase在Hadoop之上提供了类 ...

  3. 创建squashfs

    SquashFS 通常的livecd都有一个这个文件,是核心的文件系统 SquashFS 也是一个只读的文件系统,它可以将整个文件系统压缩在一起,存放在某个设备,某个分区或者普通的文件中.如果您将其压 ...

  4. 20145327 实验四 Andoid开发基础

    20145327 实验四 Andoid开发基础 安装Android Studio 安装过程出现未找到SDK的错误,只需在打开界面找到右下角的设置按钮,将路径设置为如下就可以运行.(默认安装路径) 设计 ...

  5. 20145231熊梓宏 《网络对抗》 实验8 Web基础

    20145231熊梓宏 <网络对抗> 实验8 Web基础 基础问题回答 ●什么是表单? 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据采集 ...

  6. cogs 341:[NOI2005] 聪聪与可可

    ★★   输入文件:cchkk.in   输出文件:cchkk.out   简单对比 时间限制:1 s   内存限制:256 MB [问题描述] 在一个魔法森林里,住着一只聪明的小猫聪聪和一只可爱的小 ...

  7. Response attachment filename 中文乱码

    Response.setHeader("Content-Disposition", "attachment; filename=" + fileName+&qu ...

  8. Sublime Text指南

    转自: http://lucida.me/blog/sublime-text-complete-guide/  摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的 ...

  9. Memcache课程

    这套Memcache课程今天正式上线,http://www.yzmedu.com/course/53,总计6集,包括Memcache缓存技术和Memcache用户跨域技术,后面即将发布网上最全的微信小 ...

  10. 字体渲染技术(字体抗锯齿技术) -webkit-font-smoothing: antialiased;

    1.-webkit-font-smoothing控制的字体渲染只对MacOS的webkit有效.所以,你在MacOS测试环境下面设置-webkit-font-smoothing时,只要你不把它设置为n ...