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

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

Code:

for(vari=0;i<len;i++)  
{  
selectObj.options[i]=newOption(optionList[i].txt,optionList[i].val);  
}  
 

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

Code:

functionremoveOptions(selectObj)  
{  
if(typeofselectObj!='object')  
{  
selectObj=document.getElementById(selectObj);  
}  
//原有选项计数  
varlen=selectObj.options.length;  
for(vari=0;i<len;i++)  
{  
//移除当前选项  
selectObj.options[0]=null;  
}  
}  
 

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

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

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

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

完整代码如下：

Javascript:

<scriptlanguagescriptlanguage="JavaScript"
type="text/javascript"> 
<!--　  
/**说明：将指定下拉列表的选项值清空　  
*作者：CodeBit.cn(http://www.CodeBit.cn)　*　  
*@param{String||Object]}selectObj目标下拉选框的名称或对象，必须　  
*/  
functionremoveOptions(selectObj){  
if(typeofselectObj!='object'){  
selectObj=document.getElementById(selectObj);}　//原有选项计数  
varlen=selectObj.options.length;　  
for(vari=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默认选中值，可选　  
*/  
functionsetSelectOption(selectObj,optionList,
firstOption,selected){  
if(typeofselectObj!='object'){  
selectObj=document.getElementById(selectObj);  
}　//清空选项  
removeOptions(selectObj);　//选项计数  
varstart=0;　//如果需要添加第一个选项  
if(firstOption){  
selectObj.options[0]=newOption(firstOption,'');
//选项计数从1开始  
start++;  
}　  
varlen=optionList.length;　  
for(vari=0;i<len;i++){  
//设置option  
selectObj.options[start]=newOption(optionList[i].txt,
optionList[i].val);　  
//选中项  
if(selected==optionList[i].val){  
selectObj.options[start].selected=true;  
}　  
//计数加1  
start++;  
}}　//--> 
</script>