$.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中的DECODE
原文:oracle中的DECODE DECODE函数相当于一条件语句(IF).它将输入数值与函数中的参数列表相比较,根据输入值返回一个对应值.函数的参数列表是由若干数值及其对应结果值组成的若干序偶 ...
- Visual Studio 2015环境
Visual Studio 2015环境搭建 2014年11月13日,微软发布了Visual Studio 2015 Preview,跟随者Visual Studio 2015 而来的是,.net 开 ...
- Python 2.7.3 Time与DateTime格式化
import time import datetime class TimeX: '''时间工具,目前用于格式化时间''' @staticmethod def GetLocalTimeString_T ...
- Android多媒体-MediaRecorder 录制音视频
不多说,直接上代码,有具体凝视 MyAudioRecord.java import java.io.File; import java.io.IOException; import android.a ...
- LeetCode之Maximum Product Subarray
1.(原文)问题描述 Find the contiguous subarray within an array (containing at least one number) which has t ...
- The Native POSIX Thread Library for Linux - 设计文档
nptl-design
- openwrt构建过程探索
参考网站:http://wiki.openwrt.org/doc/howto/buildroot.exigence 需要下载必要的库文件,编译器等... 1 首先要获得openwrt的源码,参考ope ...
- leetcode[86] Scramble String
将一个单词按照这种方式分: Below is one possible representation of s1 = "great": great / \ gr eat / \ / ...
- EF4.0、4.3创建表达式树状动态查询总结
---------------------------------------------快速适用 效果: where name like '%王%' and Age>=35 or Age< ...
- java 权限 部分截图
下载地址:http://download.csdn.net/detail/heyehuang/5857263