javascript 无刷新select联动菜单

本文详细介绍了联动菜单的实现方式，知道了原理，我们可以很容易地制作从XML、数据库加载的无限级联动菜单
联动菜单的实现方法：
1.确定数据格式：
首先，我们介绍一下创建 Option 的语法：
var newOption = new Option(optionText, optionvalue);
根据上面的语法，我们知道 select 选项分 optionText 和 optionvalue 两个内容，optionText 即下拉框中我们看到的选项，而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”，而实际提交的值是 “010”。
为了保持一致，我们确定选项的格式为：

 

复制代码代码如下:

{txt:"选项名", val:"选项值"}
那么一个选项组则是：
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"}
]

{txt:"选项名", val:"选项值"}
那么一个选项组则是：
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"}
]

 

复制代码代码如下:

for (var i=0; i < len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}
3.在设置选项之前，我们需要先将原有选项清空：
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.设置一个提示选择项和默认选择项：
通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。
另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目
实例

 

复制代码代码如下:

<script language="JavaScript" type="text/javascript">var cityArr=[];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:'湖州'}];function setCity(province)
{setSelectOption('city',cityArr[province],'-请选择-');}
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;}}
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,'');start++;}
var len=optionList.length;for(var i=0;i<len;i++)
{selectObj.options[start]=new Option(optionList[i].txt,optionList[i].val);if(selected==optionList[i].val)
{selectObj.options[start].selected=true;}
start++;}}</script> <select
name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);"><option
value="">-请选择-</option><option
value="江苏省">江苏省</option><option
value="浙江省">浙江省</option> </select> 省 <select
name="city" id="city"><option
value="">-请选择-</option> </select> 市

转载请注明（B5教程网）原文链接：http://www.bcty365.com/content-69-1253-1.html