<!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. Gradle学习系列之一——Gradle快速入门

    这是一个关于Gradle的学习系列,其中包含以下文章: Gradle快速入门 创建Task的多种方法 读懂Gradle语法 增量式构建 自定义Property 使用java Plugin 依赖管理 构 ...

  2. 点餐系统mealsystem.sql

    /* Navicat MySQL Data Transfer Source Server : localhost Source Server Version : 50162 Source Host : ...

  3. KMP算法详解 --- 彻头彻尾理解KMP算法

    前言 之前对kmp算法虽然了解它的原理,即求出P0···Pi的最大相同前后缀长度k. 但是问题在于如何求出这个最大前后缀长度呢? 我觉得网上很多帖子都说的不是很清楚,总感觉没有把那层纸戳破, 后来翻看 ...

  4. 【Jquery回顾】解决$冲突的问题->自定义JQuery快捷键

    $(function() { $whatever = jQuery.noConflict(); alert($whatever("#cr").text()); })

  5. C#函数、参数数组（例子）★

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 线段树的区间更新---A Simple Problem with Integers

    POJ   3468 Description 给出了一个序列,你需要处理如下两种询问. "C a b c"表示给[a, b]区间中的值全部增加c (-10000 ≤ c ≤ 100 ...

  7. fibonacci高精度加法

    A Fibonacci sequence is calculated by adding the previous two members the sequence, with the first t ...

  8. GWYAlertSelectView 选择收货地址和选择联系人

    iOS 开发在app内(特别是在类似购物和旅游类)经常会用到选择,添加联系人和收货地址,而且经常都是在跳转界面,很是麻烦,今天我就自己封装了一个类似弹出视图的代码,方便了很多!demo地址: http ...

  9. hibernate4整合spring3事务问题

    本文是作者在对hibernate4+spring3+struts2整合中遇到的一个问题.对s2sh进行了基本的整合搭建以后,就是对事务的控制管理,将hibernate的事务交由spring管理.根据网 ...

  10. xmapp的安装

    搭建网站常识性的你首先得搭建一个服务器. 首先APACHE是世界使用排名第一的WEB服务器软件,但是安装APACHE WEB服务器并不容易.如果你想添加MYSQL.PHP和PERL,那就更难了.所以可 ...