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


随机推荐
- qq音乐的歌词接口中例如:,.的特殊符号编码使用js进行转义
从qq音乐的歌词接口中得到这样的代码 jsonp11({"retcode":"0","code":"0","s ...
- 快速构建Windows 8风格应用1-开发工具安装及模拟器使用
原文:快速构建Windows 8风格应用1-开发工具安装及模拟器使用 本篇博文主要介绍的是开发Windows 8风格应用中常用的两个开发工具:Visual Studio 2012和Expression ...
- 快速构建Windows 8风格应用20-MediaElement
原文:快速构建Windows 8风格应用20-MediaElement 本篇博文主要介绍MediaElement概述.MediaElement对象介绍.MediaElement常用属性.如何控制媒体播 ...
- VMware Linux 下 Nginx
负载 VMware Linux 下 Nginx 安装配置 - nginx.conf 配置 [负载两个 Tomcat] (三) Weiseditor 2014-11-26 23:42 阅读:1 评论 ...
- 使用c#给outlook添加任务、发送邮件
原文:使用c#给outlook添加任务.发送邮件 c#在使用outlook提供的一些API时,需要将outlook相关的com引用到项目中. 具体方法就是用vs打开工程后,在工程上添加引用,在com选 ...
- windows 7 telnet 开启关闭
win7运行telnet提示:'telnet' 不是内部或外部命令,也不是可运行的程序或批处理文件 原因:win7默认没有打开此功能 解决方案:控制面板->程序和功能->打开或关闭wind ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [翻译]初识SQL Server 2005 Reporting Services Part 3
原文:[翻译]初识SQL Server 2005 Reporting Services Part 3 这是关于SSRS文章中四部分的第三部分.Part 1提供了一个创建基本报表的递阶教程.Part 2 ...
- Android 简介:Android SDK 和开发框架简介
理解Android软件栈: 库: C/C++库(libc,SSL) Android 运行时可以让Android手机从本质上与一个移动Linux实现区分开来.Dalvik并不是Java虚拟机,是一个基于 ...
- Android项目---TouchListener
public static interface View.OnTouchListener android.view.View.OnTouchListener Known Indirect Subcla ...