【转载】Javascript 兑现无刷新联动菜单（select）的方法-JavaSript-爱易网页

【转载】Javascript 兑现无刷新联动菜单（select）的方法

日期：2014-05-16　浏览次数：20460 次

【转载】Javascript 实现无刷新联动菜单（select）的方法

作者: CodeBit???? 来源: CodeBit.cn???? 时间: 2007-04-26 08:12:30

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

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

归类: Javascript

关键词: 下拉框, 选项, 级联, select, 菜单, 联动, 无刷新, Javascript,??

----------------------------------------------------------

联动菜单的实现方法：

1.确定数据格式：

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

var?newOption?=?new?Option(optionText,?optionvalue);

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

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

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

那么一个选项组则是：
Code:

var?childArr?=?[];

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?程序员要特别注意?！！！

2.根据传入的数组创建选项列表：

Code:

for?(var?i=0;?i?<?len;?i++)
{
????selectObj.options[i]?=?new?Option(optionList[i].txt,?optionList[i].val);
}

3.在设置选项之前，我们需要先将原有选项清空：

Code:

function?removeOptions(selectObj)
{
????if?(typeof?selectObj?!=?'obje

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。