js的联动菜单实现.docx

1、js的联动菜单实现JS联动菜单类By 没有鱼的水 发表于 2007-8-4 2:54:00 JS联动下拉框 function CLASS_LIANDONG_YAO(array) /数组，联动的数据源 this.array=array; this.indexName=; this.obj=; /设置子SELECT/ 参数：当前onchange的SELECT ID，要设置的SELECT ID this.subSelectChange=function(selectName1,selectName2) /try / var obj1=document.allselectName1; var obj2

2、=document.allselectName2; var objName=this.toString(); var me=this; obj1.onchange=function() me.optionChange(this.optionsthis.selectedIndex.value,obj2.id) /设置第一个SELECT/ 参数：indexName指选中项,selectName指select的ID this.firstSelectChange=function(indexName,selectName) this.obj=document.allselectName; this.i

3、ndexName=indexName; this.optionChange(this.indexName,this.obj.id) / indexName指选中项,selectName指select的ID this.optionChange=function (indexName,selectName) var obj1=document.allselectName; var me=this; obj1.length=0; obj1.options0=new Option(请选择,); for(var i=0;ithis.array.length;i+) if(this.arrayi1=ind

4、exName) /alert(this.arrayi1+ +indexName); obj1.optionsobj1.length=new Option(this.arrayi2,this.arrayi0); 请选择 /例子1-/数据源 var array=new Array(); array0=new Array(华南地区,根目录,华南地区); /数据格式 ID，父级ID，名称 array1=new Array(华北地区,根目录,华北地区); array2=new Array(上海,华南地区,上海); array3=new Array(广东,华南地区,广东); /- /这是调用代码 var

5、liandong=new CLASS_LIANDONG_YAO(array) /设置数据源 liandong.firstSelectChange(根目录,s1); /设置第一个选择框 liandong.subSelectChange(s1,s2); /设置子级选择框 js联动菜单2009-01-09 19:44这是一个完整的JS连动实例。 联动下拉菜单 !- function sele(op) switch(op) case 湖北: var arr=new Array(武汉,宜昌,黄石,武穴,十堰,天门,神龙架);break; case 湖南: var arr=new Array(长沙,株洲,

6、怀化);break; case 河南: var arr=new Array(洛阳,濮阳);break; case 河北: var arr=new Array(秦皇岛,沧州);break; document.form.city.options.length=1 for (i=0;i -请选择- 湖北 湖南 河南 河北 -请选择- 教你自己动手制作JS二级联动菜单2009-03-30 18:19在网上有很多JS的二级联动菜单,很多人都只是拿过来用就完了而且那些联动菜单都是静态的,不便于修改,今天教大家用数据库自己制作二级联动菜单首先我们新建两个数据库.一个是pro表,字段很简单.一个ID自动编号.

7、一个PRO省份名称,一个ADDTIME录入时间另一个是city表,一个ID自动编号,一个PROID省份ID,一个CITY城市名称.,一个ADDTIME录入时间在网页中,我们先用一个select选择框将省份载入 请选择. option value= 现在省份的选择框已经做好了,当我们选择的时候触发changepro函数来实现城市选择的变更城市的选择框就只需要写 下面我们来写changepro函数首先我们把city表的数据读出来然后将读出来的值写到JS的二维数组里面var onecount;onecount=0;subcat = new Array();subcat = new Array(,);

8、 onecount=;function changepro(id) document.addform.cityid.length = 0; var proid=id; var i; document.addform.cityid.options0 = new Option(请选择城市,); for (i=0;i onecount; i+) if (subcati1 = proid) document.addform.cityid.optionsdocument.addform.cityid.length = new Option(subcati0, subcati2); 在这里我们定义了一个s

9、ubcat的二维数组.当然.你如果需要做多个联动的话也可以扩展成三维数组subcat定义了城市,所属省份的ID,城市ID然后获取数据的长度onecount=; 接下来将cityid选择框清空document.addform.cityid.length = 0;接着我们就要向cityid里写入对应的城市名称了我们向changepro函数传递选中的省份的ID,将它赋值给proid第一句写入请选择城市document.addform.cityid.options0 = new Option(请选择城市,);这句可要也可不要然后定义一个I循环.用onecount来限制循环次数if (subcati1

10、= proid)如果数组中的省份名称和我们选择的省份ID相同就把该个数组项中的城市ID和城市名称写入到cityid中去document.addform.cityid.optionsdocument.addform.cityid.length = new Option(subcati0, subcati2);到这里.我们的二级联动菜单也就完成了.如果还要做三级城市呢.只需要将cityid那里在加一个onchangecity函数.再如上将三级城市名称和ID读出来放入另一个数组里面,用相同的方法写进去就可以了这样做出来的联动菜单是根据数字ID来控制的.你的地址栏也就不会出现city.asp?id=成

11、都这样的语句了,同时也避免了两个同名城市造成的数据的混淆而且还可以通过修改时间来实现排序以上只是一个范例,希望大家可以举一反三,实现更多的联动效果,这些效果在做数据统计系统的时候非常有用JS实现无刷新联动菜单（select）的方法2009-04-11 10:20所谓联动菜单，就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的，一个典型的应用就是省市联动菜单了，市的下拉选项是根据你选了哪个省来决定的，类似的需求我们经常遇到，相信许多新手都被这个问题困扰过。其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜

12、单。联动菜单的实现方法：1、确定数据格式首先，我们介绍一下创建 Option 的语法：var newOption = new Option(optionText, optionvalue);根据上面的语法，我们知道 select 选项分 optionText 和 optionvalue 两个内容，optionText 即下拉框中我们看到的选项，而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”，而实际提交的值是 “010”。为了保持一致，我们确定选项的格式为：txt:选项名, val:选项值那么一个选项组则是：var childArr = ;childArr父选项

13、值1 = txt:选项名1, val:选项值1, txt:选项名2, val:选项值2,txt:选项名3, val:选项值3,.txt:选项名n, val:选项值nchildArr父选项值2 = txt:选项名1, val:选项值1, txt:选项名2, val:选项值2,txt:选项名3, val:选项值3,.txt:选项名n, val:选项值n其中“父选项值”是父下拉列表选中的值。注意： 和 中的值是以“,” (逗号)分隔的，但是最后一个值后面不能有 “,” (逗号)，否则语法错误， PHP 程序员要特别注意 ！2、根据传入的数组创建选项列表for (var i=0; i len; i+)

14、selectObj.optionsi = new Option(optionListi.txt, optionListi.val);3、在设置选项之前，我们需要先将原有选项清空function removeOptions(selectObj)if (typeof selectObj != object)selectObj = document.getElementById(selectObj);/ 原有选项计数var len = selectObj.options.length;for (var i=0; i len; i+)/ 移除当前选项selectObj.options0 = null;

15、注意，这里不是用 selectObj.optionsi 而是用的 selectObj.options0 ，由于在 options0 删除后，后面的选项就会补上，因此，我们只需要 selectObj.options0 = null 。4、设置一个提示选择项和默认选择项通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目。完整代码如下：Javascript： !- /* 说明：将指定下拉列表的选项值清空 * 作者：S ( ) * * param String | O

16、bject selectObj 目标下拉选框的名称或对象，必须 */function removeOptions(selectObj) if (typeof selectObj != object) selectObj = document.getElementById(selectObj); / 原有选项计数 var len = selectObj.options.length; for (var i=0; i len; i+) / 移除当前选项 selectObj.options0 = null; /* 说明：设置传入的选项值到指定的下拉列表中 * 作者：S ( ) * * param S

17、tring | Object selectObj 目标下拉选框的名称或对象，必须 * param Array optionList 选项值设置 格式：txt:北京, val:010, * txt:上海, val:020 ，必须 * param String firstOption第一个选项值，如：“请选择”，可选，值为空 * param String selected 默认选中值，可选 */ function setSelectOption(selectObj, optionList, firstOption, selected) if (typeof selectObj != object) selectObj = document.getElementById(selectObj); / 清空选项 removeOptions(selectObj); / 选项计数 var start = 0; / 如果需要添加第一个选项 if (firstOption) selectObj.options0 = new Option(firstOption, ); / 选项计数从 1 开始 start +; var len = optionList.length; for (var i=0; i