<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

    <title></title>

    <meta name="keywords" content=" keywords" />

    <meta name="description" content="description" />

</head>

<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.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:#eee;display:none}

    .btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);}

</style>

<body>

<script type="text/javascript">

    $(function(){

        function objInit(obj){

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

        }

        var arrData={

            厂商1:

            {

                品牌一:'型号1-1-1,型号1-1-2',

                品牌二:'型号1-2-1,型号1-2-2'

            },

            厂商2:

            {

                品牌一:'型号2-1-1,型号2-1-2',

                品牌二:'型号2-2-1,型号2-2-2'},

            厂商3:

            {

                品牌一:'型号3-1-1,型号3-1-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>');

                    });

                    $('#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>');

                                })

                            }

                        })

                    });

                }

            })

        });

    });

</script>

<div class="clsInit">

    厂商：<select id="selF"><option>请选择</option></select>

    品牌：<select id="selT"><option>请选择</option></select>

    型号：<select id="selC"><option>请选择</option></select>

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

</div>

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

</body>

</html>

效果如下：

jQuery实现联动下拉列表查询框的更多相关文章

  1. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  2. jquery 多级联动下拉列表含（数据模型）

    方法 /** * 级联 * 联动 * @param url:访问json数据的地址 * @param param:参数 * @param levelIds:页面下拉标签数组,为联动级数 * @priv ...

  3. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  6. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  7. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  8. JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  9. Java基于POI实现excel任意多级联动下拉列表——支持从数据库查询出多级数据后直接生成【附源码】

     Excel相关知识点 (1)名称管理器--Name Manager [CoderBaby]首先需要创建多个名称(包含key及value),作为下拉列表的数据源,后续通过名称引用.可通过菜单:&quo ...

随机推荐

  1. LeetCode - 30. Substring with Concatenation of All Words

    30. Substring with Concatenation of All Words Problem's Link --------------------------------------- ...

  2. CSS 最核心的四个概念

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如 ...

  3. Java数字图像处理基础 - 必读

    写了很多篇关于图像处理的文章,没有一篇介绍Java 2D的图像处理API,文章讨论和提及的 API都是基于JDK6的,首先来看Java中如何组织一个图像对象BufferedImage的,如图: 一个B ...

  4. 重新想象 Windows 8.1 Store Apps (85) - 警报通知（闹钟）, Tile 的新特性

    [源码下载] 重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性 作者:webabcd 介绍重新想象 Windows 8.1 Store Ap ...

  5. [转] 基于 Apache Mahout 构建社会化推荐引擎

    来源:http://www.ibm.com/developerworks/cn/java/j-lo-mahout/index.html 推荐引擎简介 推荐引擎利用特殊的信息过滤(IF,Informat ...

  6. ReactNative——生命周期

    1.创建阶段 getDefaultProps:处理props的默认值 在react.createClass调用 //在创建类的时候被调用 this.props该组件的默认属性 2.实例化阶段 Reac ...

  7. Python学习之Python简介

    Python简介 Python的由来 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象.解释型计算机程序设计语言,它是吉多·范罗苏姆(Guide van ...

  8. [翻译]:SQL死锁-为什么会出现死锁

    下面这篇对理解死锁非常重要,首先死锁是如何产生的我们要清楚. We already know why blocking occurs in the system and howto detect an ...

  9. Java中Scanner类和BufferReader类之间的区别

    java.util.Scanner类是一个简单的文本扫描类,它可以解析基本数据类型和字符串.它本质上是使用正则表达式去读取不同的数据类型. Java.io.BufferedReader类为了能够高效的 ...

  10. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...