简单得二级联动 

<!--/*-->
<!--* 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{
            width: 100%;
            background-color: #fff;
        }
        .top img{
            width: 100%;
        }
        .main{
            background-color: #fff;
            text-align: center;
            font-size: 0.08rem;
            color:#B5B5B5;
            height:0.4rem;
            margin-top: 0.12rem;
        }
        table{
            width:100%;
            text-align: center;
        }
        tbody{
            width: 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;
            width: 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;
            width: 77%;
            border-radius: 0.03rem;
            height: 2rem;
            text-align: left;
            color: #717171;
            font-size: 0.16rem;
        }
        .city{
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;
            text-align: center;
        }
        .city div{
            display: inline-block;
            width: 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="width: 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="width: 90%;text-align: center;margin-top: 0.12rem;margin-left: 5%;display: none;font-size: 0.08rem">
        <div class="city-list1" style="width: 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="width: 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="width: 90%;text-align: center;margin-top: 0.12rem;margin-left: 5%;display: none;font-size: 0.08rem">
        <div class="city-list1" style="width: 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="width: 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>
posted @ 2017-07-15 10:17  zc_boy  阅读(172)  评论(0)  编辑  收藏  举报