javascript 无刷新select联动菜单

作者:简简单单 2011-12-03

联动菜单的实现方法:
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"}
]


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

注意:[ ] 和 {} 中的值是以“,” (逗号)分隔的,但是最后一个值后面不能有 “,” (逗号),否则语法错误, PHP 程序员要特别注意 !!!

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

 代码如下 复制代码

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.设置一个提示选择项和默认选择项:
通常我们在下拉列表中会设置一个提示选择项,如:“请选择城市”,这个选项值为空,作用只是提示用户执行选择操作。

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

实例

 

 代码如下 复制代码
name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);"> value="">-请选择- value="江苏省">江苏省 value="浙江省">浙江省 省 name="city" id="city"> value="">-请选择- 市

相关文章

精彩推荐