首页 > web前端 > js教程 > 正文

JS制作简单的三级联动_javascript技巧

WBOY
发布: 2016-05-16 16:08:42
原创
1326 人浏览过

用javascript制作的一个简单三级联动,非常简单实用

复制代码 代码如下:



   
       
       
   
   
        省:
       
        市:
       
        区:
       
   
    <script><br /> //声明省<br /> var pres = ["北京", "上海", "山东"]; //直接声明Array<br /> //声明市<br /> var cities = [<br /> ["东城", "昌平", "海淀"],<br /> ["浦东", "高区"],<br /> ["济南", "青岛"]<br /> ];<br /> var areas = [<br /> [<br /> ["东城1", "东城2", "东城3"],<br /> ["昌平1", "昌平2", "昌平3"],<br /> ["海淀1", "海淀2", "海淀3"]<br /> ],<br /> [<br /> ["浦东1", "浦东2", "浦东3"],<br /> ["高区1", "高区2", "高区3"]<br /> ],<br /> [<br /> ["济南1", "济南2"],<br /> ["青岛1", "青岛2"]<br /> ]<br /> ]<br /> //设置一个省的公共下标<br /> var pIndex = -1;<br /> var preEle = document.getElementById("pre");<br /> var cityEle = document.getElementById("city");<br /> var areaEle = document.getElementById("area");<br /> //先设置省的值<br /> for (var i = 0; i < pres.length; i++) {<br /> //声明option.<option value="pres[i]">Pres[i]<br /> var op = new Option(pres[i], i);<br /> //添加<br /> preEle.options.add(op);<br /> }<br /> function chg(obj) {<br /> if (obj.value == -1) {<br /> cityEle.options.length = 0;<br /> areaEle.options.length = 0;<br /> }<br /> //获取值<br /> var val = obj.value;<br /> pIndex = obj.value;<br /> //获取ctiry<br /> var cs = cities[val];<br /> //获取默认区<br /> var as = areas[val][0];<br /> //先清空市<br /> cityEle.options.length = 0;<br /> areaEle.options.length = 0;<br /> for (var i = 0; i < cs.length; i++) {<br /> var op = new Option(cs[i], i);<br /> cityEle.options.add(op);<br /> }<br /> for (var i = 0; i < as.length; i++) {<br /> var op = new Option(as[i], i);<br /> areaEle.options.add(op);<br /> }<br /> }<br /> function chg2(obj) {<br /> var val = obj.selectedIndex;<br /> var as = areas[pIndex][val];<br /> areaEle.options.length = 0;<br /> for (var i = 0; i < as.length; i++) {<br /> var op = new Option(as[i], i);<br /> areaEle.options.add(op);<br /> }<br /> }<br /> </script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板