首页 > 代码库 > 简单得二级联动
简单得二级联动
<!--/*-->
<!--* 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="http://www.mamicode.com/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="http://www.mamicode.com/0">选择省份</option>
<option value="http://www.mamicode.com/1">河南</option>
<option value="http://www.mamicode.com/2">广西</option>
</select>
省
<select name="city" id="ele" onchange="getmot()">
<option value="http://www.mamicode.com/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="http://www.mamicode.com/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>
简单得二级联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。