JavaScript实现下拉框联动的方法与见解

来源：互联网发布：ae2018cc破解版mac 编辑：程序博客网时间：2024/06/10 17:58

在浏览器注册或者选择界面通常会使用到两个或多个下拉框的关联,这里用省份和城市联动的例子来说明其实现方法.

实现思想:

1.创建一个form表单和两个select下拉框,分别来显示省和市,代码如下

<form name="forOne" action="" method="post">            <select name="selPro" onchange="addCity()"></select>省            <select name="selCity"></select>市        </form>

2.在script标签里,创建数组分别存放需要显示到界面上的省份和城市,这里要注意的是因为城市为二级框,所以应该为多维数组.

var arrPro = ["河南","黑龙江","河北"];            var arrCity = [["洛阳","郑州"],["哈尔滨","大庆"],["保定","唐山"]];

3.创建方法addPro()来实现省份的动态插入

实现原理:为用name级联的方式获取form表单中代表省份的document对象,在for循环中创建option对象,为其赋值后放在新添加的option标签里,结束单次循环.

function addPro(){                var selPro = document.forOne.selPro;                for(var i = 0;i < arrPro.length;i++){                    var opt = new Option();                    opt.value=i;                    opt.text=arrPro[i];                    selPro.options.add(opt);                }            }

4.创建方法addCity()来实现城市的动态插入

实现原理:插入城市的方法与省份相同,只是因为要实现动态显示,所以要用Objectselect.selectIndex来得到当前城市下拉框被选中的的索引值,我认为这也是省市联动的核心算法,无论是几级联动,都是用这样的方法来实现各个下拉框之间的联系

 function addCity(){                var selPro = document.forOne.selPro;                 var selCity = document.forOne.selCity;                var index = selPro.selectedIndex;                selCity.length = 0;                for(var i = 0;i < arrCity[index].length;i++){                    var opt = new Option();                    opt.value=i;                    opt.text=arrCity[index][i];                    selCity.options.add(opt);                }            }

5.最后,用onload和onchange事件来驱动script方法,整体代码和运行效果如下

<html>    <head>        <title> New Document </title>        <script type="text/javascript">            var arrPro = ["河南","黑龙江","河北"];            var arrCity = [["洛阳","郑州"],["哈尔滨","大庆"],["保定","唐山"]];            function addPro(){                var selPro = document.forOne.selPro;                for(var i = 0;i < arrPro.length;i++){                    var opt = new Option();                    opt.value=i;                    opt.text=arrPro[i];                    selPro.options.add(opt);                }            }            function addCity(){                var selPro = document.forOne.selPro;                 var selCity = document.forOne.selCity;                var index = selPro.selectedIndex;                selCity.length = 0;                for(var i = 0;i < arrCity[index].length;i++){                    var opt = new Option();                    opt.value=i;                    opt.text=arrCity[index][i];                    selCity.options.add(opt);                }            }        </script>    </head>    <body onload="addPro(),addCity()">        <form name="forOne" action="" method="post">            <select name="selPro" onchange="addCity()"></select>省            <select name="selCity"></select>市        </form>    </body></html>

6.疑问

1.关于Object.options.add(new Option(text,value))的使用

这个方法用于向select动态添加option选择框,不过需要注意的是,此方法只适用与IE浏览器,它只在IE浏览器中有效,而另外一种方式selectObject.add(option,before);则是兼容IE和firefox

2.关于触发事件的使用

onload是在页面加载后调用,然后执行省份城市的动态插入.因为二级框(城市)要根据一级框的变化而变化,所以要用到onchange,当一级select有变化的时候就会触发到onchange事件来执行相应的方法

3.关于selCity.length = 0的作用

这是document中的length属性用来返回表单中元素的个数,例如用户想返回ie页面下所有元素的个数,就可以使用document.all.length来实现.在这里,我用这个属性来对select下的元素进行清空,并且调用一次清空一次,然后在进行插入.这个属性的使用也是实现联动至关重要的一个环节.

*文章原创转载均有说明,只为更方便的学习和记录.

阅读全文

0 0