• Jquery实现下拉联动表单


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉框表单联动</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(function(){
    function objInit(obj){
    return $(obj).html("<option>请选择</option>");
    };
    var arrData={
    厂商1:{品牌1_1:"型号1_1_1,型号1_1_2",
    品牌1_2:"型号1_2_1,型号1_2_2",},
    厂商2:{品牌2_1:"型号2_1_1,型号2_1_2",
    品牌2_2:"型号2_2_1,型号2_2_2",},
    厂商3:{品牌3_1:"型号3_1_1,型号3_1_2",
    品牌3_2:"型号3_2_1,型号3_2_2",},
    };
    $.each(arrData,function(pF){
    $("#selF").append("<option>"+pF+"</option>");
    });
    $("#selF").change(function() {
    objInit("#selT");
    objInit("#selC");
    $.each(arrData,function(pF,pS){
    if($("#selF option:selected").text()== pF){
    $.each(pS, function(pT,pC){
    $("#selT").append("<option>"+pT+"</option>");
    });
    $("#selT").change(function() {
    objInit("#selC");
    $.each(pS,function(pT,pC){
    if($("#selT option:selected").text()==pT){
    $.each(pC.split(","),function(){
    $("#selC").append("<option>"+this+"</option>");
    });
    }
    })
    });
    }
    });
    });

    $("#button1").click(function() {
    var strValue="您选择的厂商:";
    strValue+=$("#selF option:selected").text();
    strValue+="&nbsp;您选择的品牌:";
    strValue+=$("#selT option:selected").text();
    strValue+="&nbsp;您选择的型号:";
    strValue+=$("#selC option:selected").text();
    $("#divTip").show().html(strValue);

    });

    });
    </script>
    </head>

    <body>
    <div class="clsInit">
    厂商:<select id="selF"><option>请选择</option></select>
    品牌:<select id="selT"><option>请选择</option></select>
    型号:<select id="selC"><option>请选择</option></select>
    <input id="button1" type="button" value="查询" class="btn"/>
    </div>
    <div class="clsInit" id="divTip" style="display:none;"></div>
    </body>
    </html>

    如果用Ajax传值,传过来的data循环:

    $.ajax({
    type:"POST",
    url:"JS/parentDate.json",
    dataType:"json",
    success: function(data){
    var select=$("#pselect");
    $.each(data,function(i,info){
    var option = $("<option value='"+info.id+"'>"+info.name+"</option>");
    select.append(option);

    });
    }
    });

  • 相关阅读:
    Halcon学习笔记之缺陷检测(二)
    tensorflow常用函数库
    luogu P2765 魔术球问题 (最小路径覆盖)
    luogu P2423 [HEOI2012]朋友圈 (最大团)
    poj 2226 Muddy Fields (二分图)
    匈牙利算法板子
    二分图
    AC日记——【模板】树链剖分 洛谷 P3384
    AC日记——[ZJOI2008]树的统计Count bzoj 1036
    去重排序
  • 原文地址:https://www.cnblogs.com/eyunhua/p/3719317.html
Copyright © 2020-2023  润新知