例子为主

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. oracle中的DECODE

    原文:oracle中的DECODE   DECODE函数相当于一条件语句(IF).它将输入数值与函数中的参数列表相比较,根据输入值返回一个对应值.函数的参数列表是由若干数值及其对应结果值组成的若干序偶 ...

  2. Visual Studio 2015环境

    Visual Studio 2015环境搭建 2014年11月13日,微软发布了Visual Studio 2015 Preview,跟随者Visual Studio 2015 而来的是,.net 开 ...

  3. Python 2.7.3 Time与DateTime格式化

    import time import datetime class TimeX: '''时间工具,目前用于格式化时间''' @staticmethod def GetLocalTimeString_T ...

  4. Android多媒体-MediaRecorder 录制音视频

    不多说,直接上代码,有具体凝视 MyAudioRecord.java import java.io.File; import java.io.IOException; import android.a ...

  5. LeetCode之Maximum Product Subarray

    1.(原文)问题描述 Find the contiguous subarray within an array (containing at least one number) which has t ...

  6. The Native POSIX Thread Library for Linux - 设计文档

    nptl-design

  7. openwrt构建过程探索

    参考网站:http://wiki.openwrt.org/doc/howto/buildroot.exigence 需要下载必要的库文件,编译器等... 1 首先要获得openwrt的源码,参考ope ...

  8. leetcode[86] Scramble String

    将一个单词按照这种方式分: Below is one possible representation of s1 = "great": great / \ gr eat / \ / ...

  9. EF4.0、4.3创建表达式树状动态查询总结

    ---------------------------------------------快速适用 效果: where name like '%王%' and Age>=35 or Age< ...

  10. java 权限 部分截图

    下载地址:http://download.csdn.net/detail/heyehuang/5857263