如何实现下拉框联动？

JavaScript026

如何实现下拉框联动？,第1张

网页下拉框联动，即第一个下拉框内容改变，则与之联动的另一个下拉框的内容也随之改变。这个功能javascript（以下简称js）或者jsp都可以实现，不过根据笔者经验，除非万不得已，能够利用js实现的话就尽量不要使用jsp，因为js是静态语言，执行不需要和服务器联系 ，不论在速度上还是稳定性上都有很大的优越性。

下拉框的条目内容如果是事先确定的并且数量较少，那么可以事先定义两个数组，将下拉框的条目内容存进去，为了实现上的方便，可以利用下标对照进行存储，当然，也可以用别的方法，只要可以做到第一级下拉框和二级的条目对应起来就行了。

以下标对照存储为例

比方说第一级下拉框的内容为A,B,C当选定A时，二级下拉框内容为11，22，33，选定B时，二级下拉框内容为44，55，66，选定C时，二级下拉框内容为77，88，99；这样的话定义的两个数组为：

var quanbu1 = new Array(A,A,A,B,B,B,C,C,C)

var quanbu2 = new Array(11,22,33,44,55,66,77,88,99)

基本方式有以下两种：方式1：给出菜单1的菜单数据，当点击某个菜单项后，把该项的值传给服务端，由服务端返回新的菜单数据到菜单2.方式2：菜单数据静态存储在js或者html元素中，当点击某个菜单项后，直接把相应的菜单数据到菜单2. 源代码你可以在百度搜索 "js下拉菜单 联动" 得到。