js实现的下拉框二级联动效果
本文实例讲述了js实现的下拉框二级联动效果。分享给大家供大家参考，具体如下：
<scriptlanguage="JavaScript"type="text/javascript">
<!--
/*
*说明：将指定下拉列表的选项值清空
*转自：GdongElvis(http://www.gdcool.net)
*
*@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;
}
}
/*
*@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>
<scriptlanguage="JavaScript"type="text/javascript">
varcityArr=[];
cityArr['江苏省']=
[
{txt:'南京',val:'南京'},
{txt:'无锡',val:'无锡'},
{txt:'徐州',val:'徐州'},
{txt:'苏州',val:'苏州'},
{txt:'南通',val:'南通'},
{txt:'淮阴',val:'淮阴'},
{txt:'扬州',val:'扬州'},
{txt:'镇江',val:'镇江'},
{txt:'常州',val:'常州'}
];
cityArr['浙江省']=
[
{txt:'杭州',val:'杭州'},
{txt:'宁波',val:'宁波'},
{txt:'温州',val:'温州'},
{txt:'湖州',val:'湖州'}
];
functionsetCity(province)
{
setSelectOption('city',cityArr[province],'-请选择-');
}
</script>
<selectname="province"id="province"onchange="if(this.value!='')setCity(this.options[this.selectedIndex].value);">
<optionvalue="">-请选择-</option>
<optionvalue="江苏省">江苏省</option>
<optionvalue="浙江省">浙江省</option>
</select>
省
<selectname="city"id="city">
<optionvalue="">-请选择-</option>
</select>
市
PS：这里再为大家推荐一款非常好用的JavaScript压缩、格式化与加密工具，功能非常强大：
JavaScript压缩/格式化/加密工具：http://tools.jb51.net/code/jscompress
上面这款js工具中的加密功能可实现js代码的eval函数加密形式，对此本站还提供了如下这款针对eval函数加密的解密工具，非常强大实用！
js的eval方法在线加密解密工具：http://tools.jb51.net/password/evalencode
更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。