解析JS实现无刷新联动菜单技巧(1)

本文向大家简单介绍一下什么是联动菜单，以及JS实现无刷新联动菜单（select）的方法，其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。

JS实现无刷新联动菜单（select）的方法

所谓联动菜单，就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的，一个典型的应用就是省市联动菜单了，市的下拉选项是根据你选了哪个省来决定的，类似的需求我们经常遇到，相信许多新手都被这个问题困扰过。

其实，联动菜单的实现原理非常简单，本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单。

联动菜单的实现方法：

1.确定数据格式：

首先，我们介绍一下创建Option的语法：

Code:

varnewOption=newOption(optionText,optionvalue);  
 

根据上面的语法，我们知道select选项分optionText和optionvalue两个内容，optionText即下拉框中我们看到的选项，而optionvalue则是提交的实际值。比如一个选项我们看到的是“北京”，而实际提交的值是“010”。

为了保持一致，我们确定选项的格式为：

Code:

{txt:"选项名",val:"选项值"}  
 

那么一个选项组则是：

Code:

varchildArr=[];  
childArr['父选项值1']=[  
{txt:"选项名1",val:"选项值1"},  
{txt:"选项名2",val:"选项值2"},  
{txt:"选项名3",val:"选项值3"},  
...  
{txt:"选项名n",val:"选项值n"}  
]  
childArr['父选项值2']=[  
{txt:"选项名1",val:"选项值1"},  
{txt:"选项名2",val:"选项值2"},  
{txt:"选项名3",val:"选项值3"},  
...  
{txt:"选项名n",val:"选项值n"}  
]  
 

其中“父选项值”是父下拉列表选中的值。

注意：[]和{}中的值是以“,”(逗号)分隔的，但是最后一个值后面不能有“,”(逗号)，否则语法错误，PHP程序员要特别注意！！！