例子为主

html主要代码

<div class="fl search">厂商:<select id="firms"><option>请选择</option></select> 品牌:<select id="brandmark"><option>请选择</option></select> 型号:<select id="type"><option>请选择</option></select>

js:

$(function(){

function init(obj){
return $(obj).html("<option>请选择</option>");
}
var goodsData = {
小米: {小米:"小米3,小米4",红米:"红米note,红米note2"},
苹果: {iphone:"iphone5,iphone6",ipad:"ipad1,ipad2"},
魅族: {魅族:"魅族1,魅族2",魅蓝:"魅蓝1,魅蓝note"}
};
var f = false;
var b = false;
var t = false;
$.each(goodsData,function(fs){
$('#firms').append("<option>"+fs+"</option>");

});
$('#firms').change(function(){
f = true;
init("#brandmark");
init("#type");
$.each(goodsData,function(fs,bo){

if($('#firms option:selected').text() == fs){
$.each(bo,function(bd,tp){
$('#brandmark').append("<option>"+bd+"</option>");
});
$('#brandmark').change(function(){
init("#type");
b = true;
$.each(bo,function(bd,tp){
if($('#brandmark option:selected').text() == bd){
$.each(tp.split(","),function(){
$('#type').append("<option>"+this+"</option>")
});
}
});
$('#type').change(function(){
t = true;
});
});
}
});
});
$('#searchBtn').click(function(){
if(f&&b&&t){
var str = "你选择的厂商:";
str += $('#firms option:selected').text();
str +="&nbsp;你选择的品牌:";
str += $('#brandmarkm option:selected').text();
str +="&nbsp;你选择的型号:";
str += $('#type option:selected').text();
$('.showdata').show().html(str);
}else if(f&&!b&&!t){
$('.showdata').show().html("请选择品牌和型号");
}else if(f&&b&&!t){
$('.showdata').show().html("请选择型号");
}else{
$('.showdata').show().html("请选择商品");
}
});
});

随机推荐

  1. Codeforces 527C Glass Carving(Set)

    意甲冠军  片w*h玻璃  其n斯普利特倍  各事业部为垂直或水平  每个分割窗格区域的最大输出 用两个set存储每次分割的位置   就能够比較方便的把每次分割产生和消失的长宽存下来  每次分割后剩下 ...

  2. ubuntu eclipse android搭建

    1.eclipse加入android adt: 终端:sudo gedit /etc/hosts 加入: #for android 173.194.72.93 dl.google.com 173.19 ...

  3. APACHE启动失败是SYSTEM对apache目录没权限导致

    表现如下: Apache: 1.The Apache service named reported the following error:>>> (OS 5)拒绝访问. : htt ...

  4. Linux内核策略介绍

      Linux内核策略介绍学习笔记   主要内容 硬件 策略 CPU 进程调度.系统调用.中断 内存 内存管理 外存 文件IO 网络 协议栈 其他 时间管理 进程调度 内核的运行时间 系统启动.中断发 ...

  5. javascript call和apply

    每个函数都包含两个非继承而来的方法:call和apply. 我们可以通过这两个方法来间接调用函数.可以这样: f.call(o); f.apply(o); //o对象间接调用了f函数 这与下面的功能相 ...

  6. 在PHP中如何连接到数据库

    首先我们先运行WampServer中的phpMyAdmin随即弹出phpMyAdmin页面   在弹出的页面中左边是数据库列表  右边是相应的设置 选择一个数据库  在里面创建一张数据表  注意创建数 ...

  7. C#函数式程序设计之泛型

    Intellij修改archetype Plugin配置 2014-03-16 09:26 by 破狼, 204 阅读, 0 评论,收藏, 编辑 Maven archetype plugin为我们提供 ...

  8. Android:开发环境搭建、移植

    一:搭建Android安卓开发环境 准备文件 1.eclipse-SDK-4.2-win32.zip 2.JDK(Java Development Kit) 3.ADT,安卓开发的一个eclipse的 ...

  9. Factovisors - PC110704

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10139.html 原创: 作者: ...

  10. lnmp1.0 升级php.5.4.28 后出错 Nginx 502 Bad Gateway

    碰到一个很奇怪的问题,用lnmp自带的./upgrade_php.sh升级 php5.4.27正常.但升级到php5.4.28就出错,访问p.php 提示:Nginx 502 Bad Gateway. ...