zoukankan      html  css  js  c++  java
  • $.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 +="&nbsp;你选择的品牌:";
    str += $('#brandmarkm option:selected').text();
    str +="&nbsp;你选择的型号:";
    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("请选择商品");
    }
    });
    });

  • 相关阅读:
    Trie
    [转]Tarjan应用:求割点/桥/缩点/强连通分量/双连通分量/LCA(最近公共祖先)
    [Bzoj2242]常见数值算法
    JavaScript百炼成仙(记录笔记)
    tcpreplay重放报文,tcpdump能抓到包,应用程序收不到包
    用jquery tools来实现选项卡
    ExtNet第二篇
    线性表最简单的表示
    c语言中线性表基本操作方法
    ExtNet第一篇
  • 原文地址:https://www.cnblogs.com/Ushadow/p/5678524.html
Copyright © 2011-2022 走看看