例子为主

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. Redis 中文入库成功,读取数据写入文件乱码问题

    近期须要用到redis ,可是在编码这个问题上,纠结了非常久.        需求 :每天一个进程将中文文件入库到redis中(不定时更新) ,另外几个进程读取redis中的信息 ,并处理数据结果.使 ...

  2. 关于PHP的工作流引擎

    关于PHP的工作流引擎,除了三大主流开源:PorcessMaker(排名第一,因其有拖放式图形定义界面),RadiCore(基于PETRI NET)和CuteFlow以外,另外还有一个不为人知的,但却 ...

  3. 过度补脑系列:Nokia的不归路

    没有数据,没有调查,只是突然想起诺基亚... 23号的一节酱油课,脑海中突然闪过两个关键字--nokia & android 于是用手机百度了一下,竟然真的出了新机型,NokiaX,X东24日 ...

  4. 图解IntelliJ IDEA 13版本对Android SQLite数据库的支持

    IntelliJ IDEA 13版本的重要构建之一是支持Android程序开发.当然对Android SQLite数据库的支持也就成为了Android开发者对IntelliJ IDEA 13版本的绝对 ...

  5. 在ubuntu下把php的网页调试功能打开

    我这儿的环境是 Ubuntu 14.04  + Lighttpd + PHP5.5 默认情况下php的网页调试功能是不打开的,当PHP解析到一个错误的语法时会直接输出为空白. 我在网上找一许多文章,说 ...

  6. 终于有人把O2O、C2C、B2B、B2C的区别讲透了!

    终于有人把O2O.C2C.B2B.B2C的区别讲透了! 一.O2O.C2C.B2B.B2C的区别在哪里? O2O是online to offline分为四种运营模式: 1.online to offl ...

  7. Asp.Net MVC页面静态化功能实现一:利用IHttpModule,摒弃ResultFilter

    上一篇有提到利用IHttpModule和ResultFilter实现页面静态化功能.后来经过一些改动,将ResultFilter中要实现的功能全部转移到IHttpModule中来实现 Asp.Net ...

  8. postal邮件发送(一):基本配置

    前言 源码:https://github.com/andrewdavey/postal 文档:http://aboutcode.net/postal/ postal最大好处就是再也不用拼接html发送 ...

  9. BitMap画图

    package com.example.examples_05_07; import android.content.Context; import android.graphics.Bitmap; ...

  10. C#Console程序使用Ninject

    本来想使用一下Ninject的,然后搜索了很久,都没找到比较详细的关于Ninject的使用方法等内容.于是乎干脆自己来写几篇介绍Ninject的内容. 1.      依赖注入和IOC 依赖注入和IO ...