例子为主
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("请选择商品"); } }); });
转载于:https://www.cnblogs.com/Ushadow/p/5678524.html
