$.each()方法,其实挺不错的
例子为主
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 +=" 你选择的品牌:";
str += $('#brandmarkm option:selected').text();
str +=" 你选择的型号:";
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("请选择商品");
}
});
});


随机推荐
- ASP.NET 5 Identity
ASP.NET 5 Identity “跌倒了”指的是这一篇博文:爱与恨的抉择:ASP.NET 5+EntityFramework 7 如果想了解 ASP.NET Identity 的“历史”及“ ...
- DDD分层架构之仓储
DDD分层架构之仓储(层超类型基础篇) 前一篇介绍了仓储的基本概念,并谈了我对仓储的一些认识,本文将实现仓储的基本功能. 仓储代表聚合在内存中的集合,所以仓储的接口需要模拟得像一个集合.仓储中有很多操 ...
- [译]Java 设计模式之工厂
(文章翻译自Java Design Pattern: Factory) 1.Java工厂模式的来历 工厂设计模式用于创建基于不同参数的对象.下面的例子就是在一个工厂里创建一个人.如果我们向工厂要一个b ...
- mysql编码的那点事
Mysql编码问题 在php页面可以向mysql插入英文字符,但就是不能插入中文字符,在cmd客户端也可从插入,这是困扰我两天的问题. 在网上找了很多资料,最终确定了是字符编码这个地方出现了问题,首 ...
- SVG 学习(一)
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...
- 让Xcode Lua 语法高亮
本人不太喜欢用code ide 还是喜欢XCODE的风格 1.让Xcode支援Lua语法高亮(Syntax Highlighting) 1. 下载https://github.com/breinhar ...
- redmine的邮件配置
redmine的邮件配置 2012-01-04 18:09:21| 分类: 默认分类|举报|字号 订阅 redmine里要用到邮件通知,本来以为很是简单,网上也有许多教程,谁知忙活了一下午, ...
- gulp package.json
{ "name": "gulpAngular1", "version": "0.0.0", "dependen ...
- JQuery UI Layout Plug-in布局
端]使用JQuery UI Layout Plug-in布局 引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布 ...
- WebApi HttpMsgHanler的执行顺序
原来忘记在哪个大牛的博客上看到的,说添加顺序与执行顺序是相反的,事实在下边:直接上代码: //STEP10,不论如何先记录下来请求信息 if (msgHandlerSettings.LoggingHa ...