简单得二级联动

<!--/*--><!--* 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>
时间: 2024-10-24 06:40:17

简单得二级联动的相关文章

利用JS实现一个简单的二级联动菜单

前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"

通同select便签实现简单的二级联动

<!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-

jq实现简单的二级联动下拉框

1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati

一个简单的二级联动效果,看完之后立马你也可以写一个(有源码,纯js,带注释)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择</title> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1

JavaScript基础 简单的二级联动下拉列表

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

php简单实现二级联动

<script type="text/javascript"> //当第一级选项发生变化的时候跳转 function jump() { location.href='?firstid='+document.getElementById('first').value; } </script> <?php //连接数据库 @mysql_connect('localhost','root',''); mysql_select_db('test'); mysql_

jquery $.post() 向php传值 实现简单的二级联动

1 其中selectid是一个下拉菜单的id 2 3 $().ready(function () { 4 $("#selectid").change(function () { 5 $("#selectid").empty(); 6 var ov = $("#selectid").val(); 7 $.post( 8 "ajax_func.php",//需要纯php代码,不要有html混杂 9 {role: ov}, 10 f

jQuery动态绑定事件(简单模拟二级联动效果)

绑定事件:$("#leyangjun").bind("change",function(){ jquery 给标签赋值:$('#leyangjun').text('好一朵美丽的茉莉花'); 清空表单值:$("#leyangjun").empty(); radio取值:$("input[name='radioName'][checked]").val(); <!DOCTYPE html PUBLIC "-//W3

ajax实现二级联动

用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" > 2 <option>请选择--</option> 3 </select> 4 城市:<select id="city"> 5 <option>请选择--</option> 6 </select>