开发学院网页设计 JavaScript JS实现无刷新联动菜单（select）的方法阅读

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

　2010-09-14 13:03:34　来源：WEB开发网　　　

核心提示： 其中“父选项值”是父下拉列表选中的值，注意：[ ] 和 {} 中的值是以“,” (逗号)分隔的，JS实现无刷新联动菜单（select）的方法(2)，但是最后一个值后面不能有 “,” (逗号)，否则语法错误，如：&ldq

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

注意：[ ] 和 {} 中的值是以“,” (逗号)分隔的，但是最后一个值后面不能有 “,” (逗号)，否则语法错误， 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 != 'object')
　　{
　　　　selectObj = document.getElementById(selectObj);
　　}
　　// 原有选项计数
　　var len = selectObj.options.length;
　　for (var i=0; i < len; i++)
　　{
　　　　// 移除当前选项
　　　　selectObj.options[0] = null;
　　}
}

注意，这里不是用 selectObj.options[i] 而是用的 selectObj.options[0] ，由于在 options[0] 删除后，后面的选项就会补上，因此，我们只需要 selectObj.options[0] = null 。

4.设置一个提示选择项和默认选择项：

通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。

另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目。

完整代码如下：

Javascript:

<script language="JavaScript" type="text/javascript">
<!--　
/** 说明：将指定下拉列表的选项值清空　
* 作者：CodeBit.cn ( http://www.CodeBit.cn )　*　
* @param {String || Object]} 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.options[0] = null;　　
} }
/** 说明：设置传入的选项值到指定的下拉列表中　
* 作者：CodeBit.cn ( http://www.CodeBit.cn )　*　
* @param {String || 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.options[0] = new Option(firstOption, '');　　// 选项计数从 1 开始　　　　
start ++;　　
}　　　
var len = optionList.length;　　　
for (var i=0; i < len; i++) {　　　　
// 设置 option　　　　
selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);　　　　　
// 选中项　　　　
if(selected == optionList[i].val){　　　　　　
selectObj.options[start].selected = true;　　　　
}　　　　　
// 计数加 1　　　　
start ++;
} }　//-->
</script>