<!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. mysql创建每月执行一次的event

    DELIMITER $$ CREATE /*[DEFINER = { user | CURRENT_USER }]*/ EVENT `dev_sp2p6`.`e_test1` ON SCHEDULEE ...

  2. Github教程(2)

    一些小技巧: 在Github的个人主页中按Shift+/ 可以显示快捷键的操作: 在某个项目的文件列表中,按下t,即可根据输入的文件名和部分文件名查找文件: 对比两个分支之间的差别,以mybatis项 ...

  3. MVC编辑状态两个DropDownList联动

    前几天使用jQuery在MVC应用程序中,实现了<jQuery实现两个DropDownList联动(MVC)>http://www.cnblogs.com/insus/p/3414480. ...

  4. Unity Shader入门基础（一）

    渲染流水线   一.渲染流水线 渲染流水线的工作任务在于由一个三维场景出发.生存(或者说渲染)一张二维图像.换句话说,计算机需要从一系列的顶点数据.纹理等信息出发,把这些信息最终转换成一张人眼可以看到 ...

  5. JS代码的位置与事件响应代码块的封装问题

    JS代码的位置       我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中h ...

  6. 011_URL和Ajax辅助器方法

    创建基本的链接和URL 在我们介绍链接或URL之前先做一些准备,我们这部分要介绍的知识将要使用的项目就是之前建立的HelperMethods项目,现在需要先为其添加一个People控制器,并在其中定义 ...

  7. sql 添加修改说明

    --为字段a2添加描述信息 EXECUTE sp_addextendedproperty N'MS_Description', '性别', N'user', N'dbo', N'table', N'表 ...

  8. USE “schema_name” in PostgreSQL

    http://timmurphy.org/tag/mysql/ http://timmurphy.org/2009/11/17/use-schema_name-in-postgresql/ ===== ...

  9. ahjesus动态生成表达式树

    直接上方法,看的懂的拿去用,看不懂的找资料看懂 , , Double floorprice = , Double topprice = , string brandstr = "" ...

  10. SpringMVC中出现" 400 Bad Request "错误（用@ResponseBody处理ajax传过来的json数据转成bean）的解决方法

    最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@Respon ...