$.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("请选择商品");
}
});
});
随机推荐
- Oracle / PLSQL写语句的时候常使用的函数
最近在学习数据库方面的知识,做个标记. 这里有英文解释,建议多看看英文文档: https://www.techonthenet.com/oracle/functions/ 下面开始记录一下,自己在Or ...
- 组件接口(API)设计指南[5]-最后的思考
*阅读其它章节: http://blog.csdn.net/cuibo1123/article/details/39894477 最后的思考 我通过困难的学习以及多年的失误.写了这片篇关于创建组件和a ...
- leetcode 第42题 Multiply Strings
题目:Given two numbers represented as strings, return multiplication of the numbers as a string. Note: ...
- OpenWrt的UCI系统
http://wiki.openwrt.org/doc/uci UCI是Unified Configuration Interface的缩写,翻译成中文就是统一配置接口,用途就是为OpenWrt提供一 ...
- 利用PL/SQL Developer工具导出数据到excel,导入excel数据到表
使用PL/SQL Developer工具. 导出: 1.执行select 语句查询出需要导出的数据. 2.在数据列表中右键,选择save results.保存为.csv文件,然后已excel方式打开就 ...
- 雕爷:我眼中的O2O成长路径
嗨,老周,这篇文章写给你.知道你最近正在纠结于O2O的择业分析,因为你是有极高身价的人,所以选择起来必须谨慎,选错了,不是身家那千把万的损失,更是一生荣耀的赌注和起落. “所谓战略,就是站在未来看今天 ...
- jQuery百叶窗图片滑块
超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash ...
- asp.net mvc使用validate.js验证 若name属性包含特殊字符则加上双引号即可
rules: { "Can.CName": { required: true, ...
- Bootstrap 图标
Bootstrap 图标由 Glyphicons 提供.详情可以去bootstrap官网进行查看. 用法: <i class="icon_class_name">< ...
- 关于 MVCC 的基础
作为第一篇对 MVCC 的学习材料,以下内容翻译自 Wikipedia. 1. 什么是MVCC 1.1 基础概念 MVCC,Multi-Version Concurrency Control,多版本并 ...