例子为主

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. 推荐两个针对github的chrome插件

    作为一只程序猿,在github上找代码.看代码是再正常不过的事情了.这时候有个工具可以方便你翻看代码,想必是极好的. Sourcegraph for GitHub 这个插件允许你像使用IDE那样浏览代 ...

  2. HTML5----input-datalist输入框自己主动提示功能

    效果图: <label for="word_name">字母 : </label> <input id="word_name" n ...

  3. 我的CSS 入门1

    CSS(Cascading Style Sheets)级联样式表.我现在所知的,她的存在能够更好的管理多个HTML文件,或者是为了使得网页设计更为丰富多彩,“简单可依赖”. 如果你对HTML一无所知, ...

  4. 【转】仿QQ5.0侧滑菜单ResideMenu

    本文由孙国威 原创.如需转载,请注明出处! 原文:http://blog.csdn.net/manoel/article/details/39013095 为了后续对这个项目进行优化,比如透明度动画. ...

  5. Repository 仓储,你的归宿究竟在哪?(上)

    Repository 仓储,你的归宿究竟在哪?(上) 写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博 ...

  6. Mac OS X下环境搭建 Sublime Text 2 环境变量配置 开发工具配置Golang (Go语言)

    Golang (Go语言) Mac OS X下环境搭建 环境变量配置 开发工具配置 Sublime Text 2 一.安装Golang的SDK 在官网http://golang.org/ 直接下载安装 ...

  7. C#中的深复制与浅复制

    C#中分为值类型和引用类型,值类型的变量直接包含其数据,而引用类型的变量则存储对象的引用. 对于值类型,每个变量都有自己的数据副本,对一个变量的操作不可能影响到另一个变量.如 class Progra ...

  8. 移动web知识

    1.像素知识 px: css pixels,逻辑像素,浏览器使用的抽象单位 dp,pt:device independent pixels ,设备无关像素 dpr:devicePixelRatio 设 ...

  9. 有关sort函数的用法

    最近碰到这个sort函数,网上查了一些资料,感觉还是直接扔给我代码比较好理解些 要是像我一样的童鞋,建议看这里:http://www.cplusplus.me/265.html 个人认为很好理解..这 ...

  10. 获取时间SQL函数语句

    1.获取时间 获取当天的数据 where  DATEDIFF (DD, 数据库中时间的字段 ,GETDATE())=0 查询24小时内的 where  DATEDIFF (HH, 数据库中时间的字段 ...