<!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. 如何彻底的卸载sql server数据库

    如何彻底的卸载sql server数据库    好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净 ...

  2. Unity中简单使用Opengl

    简介 由于项目特殊需求,需要在unity中使用一些OpenGL的东西来绘制图形(PS:其实就是有一个拖尾算法只有OpenGL版本~~~懒得改了,直接在unity中使用OpenGL算了).所以琢磨咯下如 ...

  3. 百度地图刷新显示不完整？（应该是和div顺序有关系）

    解决方案:1异步加载(jquery(function(){loadJScript():}))   2解析加载设置了个延迟(setTimeOut(getInit,1000))

  4. 【Bootstrap基础学习】03 Bootstrap插件示例

    模态框 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary ...

  5. 51Node 1035----最长的循环节

    51Node  1035----最长的循环节 正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数.     1/6= 0.1 ...

  6. html 隐藏滚动条

    1. html 标签加属性 <html lang="en" class="no-ie" style="overflow:hidden;" ...

  7. python 学习之电脑的发展历史

    电脑的发展历史 电脑的学名叫计算机,电脑是用来做计算的.在古时候,人们最早使用的计算工具可能是手指,英文单词“digit”既有“数字”的意思,又有“手指“的意思.古人用石头打猎,所以还有可能是石头来辅 ...

  8. PHP学习笔记：删除与销毁session

    删除某个session值可以使用PHP的unset函数,删除后就会从全局变量$_SESSION中去除,无法访问. session_start(); $_SESSION['name'] = 'jobs' ...

  9. PlayFramework 1 自定义标签 -- FastTags http://unmi.cc/category/javajee/playframework/

    最早是用 HTML 来自定义标签,现在觉得 HTML 写有关逻辑的代码就有点不伦不类了,HTML 里着重是显示代码.前有一篇  PlayFramework 1 模板应用 -- Java 对象扩展 学习 ...

  10. ASP.NET本质论第一章网站应用程序学习笔记1

    1.统一资源标示符 1) 格式:协议://主机[.端口号][绝对路径[?参数]],在Http://www.kencery.com/hyl/index/login中,http表示协议的名称,www.ke ...