|
设置一个提示选择项和默认选择项：
通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。
另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目
实例
复制代码代码如下：
- <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> 市
联动菜单的实现方法：
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;
- }
- }
|
