$.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("请选择商品");
}
});
});


随机推荐
- JAVA 代码生成。SimpleCaptcha
去官方网站下载Jar包: http://simplecaptcha.sourceforge.net/ Javadocs: http://simplecaptcha.sourceforge.net/ja ...
- 设计模式---订阅发布模式(Subscribe/Publish)
设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...
- CodeSmith 生成代码
使用CodeSmith 生成代码 CodeSmith是一款优秀的代码生成工具.在ORM中,它能帮助我们生成实体类.XML配置文件,从而简化了我们一部分的开发工作.下面简要说说它的基本用法. 1. 打 ...
- [译]Java 设计模式之桥接
(文章翻译自Java Design Pattern: Bridge) 简单来说,桥梁设计模式是一个两层的抽象. 桥接模式就是从一个抽象中实现中解耦以便两个都可以独立的改变.桥接使用封装聚合而且使用继承 ...
- VMware vCloud与Zend Server实现PHP应用程序自动化交付
在巴塞罗那2013年VMworld大会上,开发商VMware公司和zend公司在云管理市场上大放异彩.两家公司的产品VMware vCloud和Zend Server组合,实现了PHP程序自动化交付. ...
- 【SSRS】入门篇(四) -- 向报表添加数据
原文:[SSRS]入门篇(四) -- 向报表添加数据 定义好数据集后 [SSRS]入门篇(三) -- 为报表定义数据集 ,就可以开始设计报表了,将要显示在报表的字段.文本框.图像和其他项从工具箱拖放到 ...
- java中dao层的通用层,通过反射机制,操作数据库的增删改,适用的范围是不包含属性类
这里首先必须注意的是:类的类名.字段必须与数据库中的表名和字段名保持一致,否则无法通过反射机制作出通用层 /** * 学生信息类,数据库中的StuInfo表 * */public class StuI ...
- WCF总结笔记
------------------------windowform承载服务步骤: (1)定义契约: using System; using System.Collections.Generic; u ...
- C#外挂QQ
C#外挂QQ找茬辅助源码,早期开发 这是一款几年前开发的工具,当年作为一民IT纯屌,为了当年自己心目中的一位女神熬夜开发完成.女神使用后找茬等级瞬间从眼明手快升级为三只眼...每次看到这个就会想起 ...
- rcp(插件开发) 如何查找自己定义的扩展点
规则: 扩展点所在的插件ID(X)+扩展点的name(Y) 也就是 X.Y 具体代码 Platform.getExtensionRegistry().getExtensionPoint(X.Y).ge ...