• 简单得二级联动


    <!--/*-->
    <!--* Created by sincere丶胡(weibo) on 2017/6/28.-->
    <!--*/-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>yadi</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
    body{
    margin:0;
    padding:0;
    font-family: '微软雅黑';
    background-color: #dddddd;
    font-size: 0.14rem;
    }
    .top{
    100%;
    background-color: #fff;
    }
    .top img{
    100%;
    }
    .main{
    background-color: #fff;
    text-align: center;
    font-size: 0.08rem;
    color:#B5B5B5;
    height:0.4rem;
    margin-top: 0.12rem;
    }
    table{
    100%;
    text-align: center;
    }
    tbody{
    100%;
    text-align: center;
    }
    tr{
    display: inline-block;
    }
    select{
    border: 1px solid #999999;
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 0.03rem;
    height: 0.35rem;
    line-height: 0.35rem;
    1.3rem;
    font-size: 0.16rem;
    color:#585858;
    }
    form{
    font-size: 0.16rem;

    color: #585858;
    }
    tr{
    font-size: 0.16rem;
    color: #585858;
    }
    textarea{
    background-color: #DDDDDD;
    77%;
    border-radius: 0.03rem;
    height: 2rem;
    text-align: left;
    color: #717171;
    font-size: 0.16rem;
    }
    .city{
    100%;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    }
    .city div{
    display: inline-block;
    1rem;
    border-radius: 0.03rem;
    border: 1px solid #666;
    }
    .content-henan,.content-guangxi{
    background-color: #DDDDDD;
    border-radius: 0.03rem;
    height: 2rem;
    text-align: left;
    color: #717171;
    font-size: 0.16rem;
    border: 1px solid #666;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    }
    .city-list1{
    overflow: hidden;

    }
    .city-list1 div{
    overflow: hidden;
    height: 0.3rem;
    }
    </style>
    </head>
    <body>

    <div class="top">
    <img src="bg.png">
    <div class="main">备注:购车前,请出示此券,并咨询门店导购员获取门店编码</div>

    </div>
    <div>
    <div style="margin-left: 80%;color: #6C6C6C;padding: 0.1rem 0;">了解详情</div>
    <div style=" 100%;font-size: 0.35rem;text-align: center;font-weight:bold;color: #575556;padding: 0.2rem 0;">查找门店</div>

    <!--二级联动-->
    <div class="city">
    <form name="form1">
    <select name="country" onChange="getCity()" >
    <option value="0">选择省份</option>
    <option value="1">河南</option>
    <option value="2">广西</option>
    </select>
    省&nbsp;&nbsp;&nbsp;
    <select name="city" id="ele" onchange="getmot()">
    <option value="0">选择城市</option>
    </select>

    </form>
    </div>


    <div class="content-henan" style=" 90%;text-align: center;margin-top: 0.12rem;margin-left: 5%;display: none;font-size: 0.08rem">
    <div class="city-list1" style=" 49%;display: inline-block;float: left">
    <div>郑州登封送表雅迪专卖店</div>
    <div>郑州登封告成雅迪专卖店</div>
    <div>郑州登封君召雅迪专卖店</div>
    <div>郑州登封雅迪专卖店</div>
    <div>郑州登封大金店雅迪专卖店</div>
    <div>郑州登封卢店镇雅迪专卖店</div>
    <div>郑州登封颖阳雅迪专卖店</div>
    <div>东华镇雅迪电动车</div>
    <div>郑州京广路雅迪专卖店</div>
    <div>郑州大学路雅迪专卖店</div>
    <div>郑州城南路雅迪专卖店</div>
    <div>郑州政通路电动车市场雅迪专卖店</div>
    <div>郑州医学院雅迪专卖店</div>
    <div>马寨雅迪</div>
    <div>郑州巩义米河雅迪专卖店</div>
    <div>郑州巩义站街雅迪专卖店</div>
    <div>郑州巩义西村雅迪专卖店</div>
    <div>郑州巩义市雅迪专卖店</div>
    <div>郑州巩义芝田镇雅迪店</div>
    <div>郑州巩义夹津口雅迪专卖店</div>
    <div>鲁庄镇雅迪电动车</div>
    <div>郑州祭城雅迪专卖店</div>
    <div>郑州航海路与城东路交叉口雅迪专卖店</div>
    <div>郑州航母城雅迪专卖店</div>
    <div>郑州市管城区航海路与豫英路店</div>
    <div>郑州荥阳古荥雅迪专卖店</div>
    <div>郑州金水黄河路雅迪旗舰1店</div>
    <div>郑州丰庆路雅迪专卖店</div>
    <div>郑州兴隆铺市场雅迪专卖店</div>
    <div>郑州老鸦陈雅迪专卖店</div>
    <div>郑州市惠济区国基路雅迪</div>
    <div>郑州上街雅迪专卖店</div>
    <div>郑州上街区雅迪新店</div>
    <div>郑州金水黄河路雅迪旗舰2店</div>
    <div>郑州航海路美林河畔雅迪专卖店</div>
    <div>郑州三全路雅迪专卖店</div>
    <div>郑州紫金山路雅迪专卖店</div>
    <div>郑州棉纺路雅迪专卖店</div>
    <div>郑州姚桥雅迪专卖店</div>
    <div>郑州文化路雅迪专卖店</div>
    <div>郑信路雅迪</div>
    <div>郑州市金水区三全路雅迪2店</div>
    <div>郑州市金水区陈砦电动车市场店</div>
    <div>郑州新密雅迪专卖店</div>
    <div>郑州新密曲梁雅迪专卖店</div>
    <div>郑州新密大隗雅迪专卖店</div>
    <div>郑州新郑薛店雅迪专卖店</div>
    <div>郑州新郑龙湖雅迪专卖店</div>
    <div>郑州新郑市雅迪专卖店</div>
    <div>郑州新郑辛店雅迪专卖店</div>
    <div>郑州新郑龙湖华南城雅迪专卖店</div>
    <div>郑州新郑航空港区雅迪专卖店</div>
    <div>郑州新郑梨河雅迪专卖店</div>
    <div>郑州新郑观音寺雅迪专卖店</div>
    <div>郑州荥阳汜水雅迪专卖店</div>
    <div>郑州荥阳刘河雅迪专卖店</div>
    <div>郑州荥阳雅迪专卖店</div>
    <div>郑州荥阳广武镇雅迪专卖店</div>
    <div>郑州荥阳崔庙镇雅迪专卖店</div>
    <div>郑州中牟八岗镇雅迪专卖店</div>
    <div>郑州中牟刘集雅迪专卖店</div>
    <div>郑州中牟姚家雅迪专卖店</div>
    <div>郑州中牟韩寺雅迪专卖店</div>
    <div>郑州中牟白沙雅迪专卖店</div>
    <div>中牟三官庙雅迪</div>
    <div>中牟狼城岗雅迪</div>
    <div>中牟万滩镇雅迪</div>
    <div>中牟韦滩雅迪</div>
    <div>中牟雅迪</div>
    <div>郑州秦岭路雅迪专卖店</div>
    <div>郑州二环支路果品市场雅迪专卖店</div>
    <div>郑州高新区梧桐大街雅迪专卖店</div>
    <div>郑州医文化宫路雅迪专卖店</div>
    <div>嵩山南路万客来店</div>
    <div>中原区须水镇雅迪</div>
    <div>郑州市中原区商业大厦店</div>

    </div>
    <div class="city-list1" style=" 49%;display: inline-block">
    <div>登封市送表矿区东送表中段菜市场南100米</div>
    <div>告成大桥北200米路东电话</div>
    <div>君召胥店中石化对面</div>
    <div>登封市少林大道与嵩阳路向西300米路北</div>
    <div>登封市大金店镇转盘南200米</div>
    <div>卢店镇迎宾大道镇政府西50米</div>
    <div>颖阳镇汽车站西门雅迪店</div>
    <div>东华镇派出所向西500米路北</div>
    <div>京广路陇海路向南200米</div>
    <div>大学路陇海路向南150米</div>
    <div>城南路</div>
    <div>政通路电动车市场</div>
    <div>大学路中原路交叉口北200米路西</div>
    <div>郑州市二七区马寨镇</div>
    <div>巩义市米河镇高杆灯对面</div>
    <div>站街镇集沟村庐苑小区楼下</div>
    <div>永安路与永通路交叉口向南100米路东</div>
    <div>巩义市新华小区</div>
    <div>芝田镇主街道</div>
    <div>巩登路与S237交叉口向东200米路南</div>
    <div>鲁庄镇丁字路口雅迪电动车</div>
    <div>郑州市郑东新区祭城庙张街与盛和街北50米路东雅迪专卖店</div>
    <div>郑州市航海路与城东路交叉口</div>
    <div>航海路与城东路往东300米航母城北门</div>
    <div>郑州市管城区航海路与豫英路交叉口</div>
    <div>古荥镇大河路老东关饭店旁</div>
    <div>黄河路与经七路路口</div>
    <div>丰庆路加气站南50米</div>
    <div>兴隆铺市场</div>
    <div>老鸦陈冷库东20米</div>
    <div>郑州市惠济区长兴路街道王寨路</div>
    <div>郑州市上街区汝南北路</div>
    <div>郑州市上街区汝南路</div>
    <div>黄河路与经七路路口向西20米</div>
    <div>航海路美林河畔</div>
    <div>三全路文化路向西200米</div>
    <div>紫荆山金水路交叉路东150米电动车新生活广场</div>
    <div>棉纺路与桐柏路交叉口东北角市场</div>
    <div>郑东新区博学路与薜夏南街北50米路东原姚桥卫生院对面</div>
    <div>郑州市文化路与白庙路向北100米路西</div>
    <div>郑东新区郑信路雅居乐园小区</div>
    <div>郑州市金水区三全路与园田路向南50米</div>
    <div>郑州市金水区庆丰街道水科路电动车市场</div>
    <div>新密市东大街雅迪电动车</div>
    <div>新密市曲梁镇邮局东100米路北</div>
    <div>新密市大隗镇菜市场西150米路南</div>
    <div>新郑市薛店镇中国联通隔壁</div>
    <div>龙湖镇老十字路口向西50米路北</div>
    <div>郑州市新郑市新建北路</div>
    <div>辛店镇北门口向西200米路南</div>
    <div>郑州龙湖镇华南城摩配7区电动车市场</div>
    <div>航空港区银河区安置区13号地东大门</div>
    <div>新郑市梨河镇十字路口向北150米路东</div>
    <div>观音寺一中向南50米路东</div>
    <div>荥阳市汜水镇中国移动隔壁</div>
    <div>荥阳市刘河镇主街道</div>
    <div>荥阳市万山北路供销社一楼</div>
    <div>荥阳市广武镇人民政府向南300米路西</div>
    <div>崔庙镇雅迪店农商银行南100米路西</div>
    <div>中牟县八岗镇十字口往北100米</div>
    <div>中牟县刘集镇派出所对面</div>
    <div>中牟县姚家镇村镇银行旁</div>
    <div>中牟县韩寺镇电动车一条街</div>
    <div>中牟白沙</div>
    <div>三官庙汽车站向北100米路西</div>
    <div>狼城岗镇村镇银行</div>
    <div>万滩镇中心卫生院南邻</div>
    <div>中牟狼城岗镇韦滩村</div>
    <div>郑州市中牟县</div>
    <div>秦岭路淮河路向北200米</div>
    <div>二环支路果品市场</div>
    <div>郑州高新区梧桐大街</div>
    <div>中原路与文化宫路交叉口向南300米路西</div>
    <div>嵩山南路万客来电动车市场</div>
    <div>郑州市中原区郑上路与西四环交叉口向西400米路南</div>
    <div>嵩山路与建设路交叉口商业大厦一楼</div>
    </div>
    </div>
    <div class="content-guangxi" style=" 90%;text-align: center;margin-top: 0.12rem;margin-left: 5%;display: none;font-size: 0.08rem">
    <div class="city-list1" style=" 49%;display: inline-block;float: left">
    <div>宾阳县黎塘中亚摩托车销售有限公司</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>横县汇盛电动车行</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>隆安县东星车行</div>
    <div>隆安县东星车行</div>
    <div>隆安县东星车行</div>
    <div>天等县天胜车行</div>
    <div>马山县三友车行</div>
    <div>马山县三友车行</div>
    <div>马山县三友车行</div>
    <div>马山县三友车行</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>宾阳县雅迪电动车专卖店</div>
    <div>上林县顺昌车城</div>
    <div>上林县顺昌车城</div>
    <div>上林县顺昌车城</div>
    <div>上林县顺昌车城</div>
    <div>上林县顺昌车城</div>
    <div>上林县顺昌车城</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>武鸣新大洋商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>
    <div>南宁麟煦阳商贸有限公司</div>

    </div>
    <div class="city-list1" style=" 49%;display: inline-block">
    <div>黎塘镇仁爱路</div>
    <div>南宁市宾阳县古辣镇</div>
    <div>南宁市宾阳县新宾镇</div>
    <div>宾阳县工业园区</div>
    <div>宾阳县宾州镇宾柳路1380号</div>
    <div>新街南103号</div>
    <div>武陵镇振武街39号</div>
    <div>宾阳县甘棠镇新兴街四新桥头(中和村口)</div>
    <div>露圩镇德才街</div>
    <div>大桥镇南悟街122号</div>
    <div>南宁市横县江北大道478号</div>
    <div>广西横县百合镇鳌山中路101号</div>
    <div>广西横县陶圩镇环城路201号</div>
    <div>广西横县峦城镇新城街469号</div>
    <div>广西横县云表镇209国道86号</div>
    <div>校椅镇校椅东街228号</div>
    <div>横县莲塘镇莲双街</div>
    <div>横县石塘镇横宾路(汽车站对面)</div>
    <div>兴宁区南建路4号-6.7.8.9</div>
    <div>江南区五一中路118号新屋村一组综合楼一楼1-2号</div>
    <div>江南区五一西路166号中石化加油站</div>
    <div>良庆区大沙田银海大道101号</div>
    <div>良庆区大沙田银海大道240号</div>
    <div>吴圩镇雅迪专卖店</div>
    <div>南晓镇团结路园路口对面</div>
    <div>广西壮族自治区南宁市良庆区银海大道758号</div>
    <div>广西壮族自治区南宁市良庆区银海大道889号(银海大道2店)</div>
    <div>隆安</div>
    <div>广西省南宁市隆安县城厢镇碟城路317号</div>
    <div>南宁市隆安县那桐镇</div>
    <div>南宁市隆安县乔建镇太阳升第一组公路旁</div>
    <div>马山县林圩镇林圩街加油站旁鸿运车行</div>
    <div>马山</div>
    <div>南宁市马山县金钗镇客运站旁</div>
    <div>南宁市马山县周鹿镇百货大楼</div>
    <div>青秀区仙葫大道西109号</div>
    <div>兴宁区南梧路243/245号</div>
    <div>青秀区双拥路5-7号银湖新宇4-5号</div>
    <div>青秀区星湖路28号大门左座一楼1号商铺</div>
    <div>青秀区长堽路35号</div>
    <div>南阳镇南滨路4号雅迪专卖店</div>
    <div>上林县白圩镇繁荣社区新张屋街</div>
    <div>广西省南宁市上林县银泉路</div>
    <div>南宁市上林县镇圩镇东街医院路口往东100米</div>
    <div>三里街上</div>
    <div>乔贤街上</div>
    <div>白圩拜堂街</div>
    <div>西燕镇西燕城东开发区</div>
    <div>武鸣</div>
    <div>武鸣</div>
    <div>武鸣</div>
    <div>广西省南宁市武鸣县锣圩镇建北路8-9号</div>
    <div>南宁市武鸣县太平镇邮政局旁</div>
    <div>南宁市武鸣县两江镇江宁路</div>
    <div>南宁市武鸣县府城镇</div>
    <div>南宁市武鸣县陆斡街市场旁</div>
    <div>南宁市武鸣县宁武镇超市对面</div>
    <div>南宁市武鸣县腾翔镇</div>
    <div>灵马镇振灵街79号</div>
    <div>西乡塘区友爱北路45号43-45铺</div>
    <div>兴宁区中华路7号-7.8.9</div>
    <div>西乡塘区中华路14号-13.14</div>
    <div>兴宁区中华路34号-5.6.7</div>
    <div>兴宁区铁塘141-144号</div>
    <div>兴宁区铁塘巷48-50号</div>
    <div>兴宁区铁塘巷118-121号</div>
    <div>西乡塘区中华路66号</div>
    <div>西乡塘区中华路133-1号一楼</div>
    <div>西乡塘区科园大道3号东湖宾馆2-5号</div>
    <div>西乡塘区明秀西路113号-20/21/22商铺</div>
    <div>南宁五塘镇邕梧路38号</div>
    <div>昆仑大道513号</div>
    <div>蒲庙镇彩虹南路76号</div>
    </div>
    </div>

    </div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="rem.js"></script>
    <script type="text/javascript">
    //定义一个二维数组
    var city=[
    ["郑州"],
    ["南宁"]

    ];
    function getCity(){
    var sltCountry=document.form1.country; //获得省份下拉框的对象
    var sltCity=document.form1.city; //获得城市下拉框的对象
    var country=city[sltCountry.selectedIndex-1]; //得到对应省份的城市数组
    sltCity.length=1; //清空城市下拉框,仅留提示选项。
    //通过for循环,将城市中的值填充到城市下拉框中
    for(var i=0;i<country.length;i++){
    sltCity[i+1]=new Option(country[i],country[i]);
    }

    }
    function getmot(){
    console.log($("#ele option:selected").text())
    if($("#ele option:selected").text()=='郑州'){
    $('.content-henan').css('display','block');
    $('.content-guangxi').css('display','none')
    }else if($("#ele option:selected").text()=='南宁'){
    $('.content-henan').css('display','none');
    $('.content-guangxi').css('display','block')
    }

    }
    </script>
    </body>
    </html>
  • 相关阅读:
    eclipse中用maven打包报错排查
    关于如何下载spring tool Suite指定版本的安装包
    win10配置JDK和tomecat
    C#读取MySql时,如果存在字段类型为date/datetime时的可能会出现以下问题
    批处理安装,卸载,启动,停止服务
    微信小程序图表组件 wx-f2
    获取项目路径
    Global.asax.cs之在线人数统计
    Global.asax 文件之 Application_Error
    Global.asax 文件是什么
  • 原文地址:https://www.cnblogs.com/zcboy/p/7181852.html
Copyright © 2020-2023  润新知