省市二级联动 通过省份选择城市 JS的简单应用 二级下拉列表
2017-08-03 13:32
696 查看
效果图如下
1.HTML 代码
首先定义两个下拉列表,一个用于选择省份,一个用于选择城市。两个 select 里的 class 适用于在CSS中修饰列表,当用户选择省份时,会触发其 change() 方法, this.valu e是将用户选择的哪个省传递到 change() 里。
2.CSS 代码
3.JS 代码
1.HTML 代码
首先定义两个下拉列表,一个用于选择省份,一个用于选择城市。两个 select 里的 class 适用于在CSS中修饰列表,当用户选择省份时,会触发其 change() 方法, this.valu e是将用户选择的哪个省传递到 change() 里。
<select class="se1" id="province" onchange="change(this.value)"><!--定义省份下拉列表--> <option value="1">山东</option> <option value="2">安徽</option> <option value="3">北京</option> <option value="4">福建</option> <option value="5">广东</option> </select> <select class="se2" id="city"><!--定义城市下拉列表--> <option value="0">请选择城市</option> </select>
2.CSS 代码
.se1,.se2{<!--修饰两个下拉列表,可以不写--> height: 30px; width: 165px; }
3.JS 代码
<script > var citys = new Array(); //一个二维数组,用于存储省市,依次对应 citys[1]=new Array("济南","青岛","烟台","济宁","德州","莱芜"); citys[2]=new Array("安庆","阜阳","合肥","马鞍山","芜湖"); c b1ee itys[3]=new Array("北京"); citys[4]=new Array("福州","龙岩","宁德","莆田"); citys[5]=new Array("潮州","佛山","广州"); function change(value) //change()方法 { document.getElementById("city").options.length=0;//初始化城市了下拉列表(每次选择省份时,自动清除上一次选择省份的城市 ) for(var m =0 ;m<citys[value].length;m++){//如果用户选择了广东,则会将5传递到 change() 方法里,就会选择city[5]={.......}, 循环取出里面的城市 var opt=document.createElement("option");//创建一个 <option></option> 标签 var node=document.createTextNode(citys[value][m]+"");// 创建一个文本 文本内容就是 读取出来的城市 等同于 潮州 opt.appendChild(node);//将文本添加到标签里等同于<option>潮州</option> document.getElementById("city").appendChild(opt);//将<option>潮州</option>添加到下拉列表里等同于<select class="se2" id="city"><option>潮州</option></select> } } </script>
相关文章推荐
- [js]实现简单的省市二级联动下拉选择菜单
- js中的数组应用小案例——省份城市的二级联动
- AngularJS Or jQuery 省份城市二级联动下拉功能
- JS简单实现城市二级联动选择插件的方法
- 代码收集_jQuery省份城市菜单二级下拉列表联动功能
- AJAX应用案例--基于XML,以POST方式,完成二级下拉联动【省份-城市】
- js实现的全国省市二级联动下拉选择菜单完整实例
- android Spinner实现一个二级联动的下拉列表,选定省份后,城市的下拉列表出现相应变化
- js的二级联动实现省份城市的选择
- JavaScript(JS)实现省市联动选择下拉列表
- jquery基于layui实现二级联动下拉选择(省份城市选择)
- JS无刷新二级联动省市下拉列表
- JS简单实现城市二级联动选择插件的方法
- js实现的全国省市二级联动下拉选择菜单完整实例
- JS实现从XML中获取省份和城市信息_二级联动
- jQuey/js 省市县三级下拉框联动的回显(简单易懂)
- js省市二级下拉联动
- js省市县三级联动下拉列表的示例
- js实现省市选择二级联动
- 四个下拉框联动 省市区法院选择 js + ajax