1.
这个下拉项可以保留或忽略,内容如“==查看所有==”可替换为自己需要的内容,value="all"属性可以获得一个附加的全过滤显示功能,建议保留:)
2.下拉菜单数据格式,(实际开发可以由后台程序生成一个数据格式字符串,这个数据串格式和你查询的表结构应该是一样的,传到模板上取得这个数据格式串即可,所有下拉菜单数据是一次传到页面上的,并且与你使用的语言开发实现没有什么关系,只要你想办法得到这个字符串格式就行了)如下:
a.第一级连动菜单的下拉选项,格式为(下拉选项option内容,下拉选项option值;......)
"上海,01;江西,02";
b.第二级连动菜单的下拉选项,(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)
"01,徐汇区,001;01,嘉定区,002;01,黄浦区,003;02,南昌市,004;02,九江市,005;02,上饶市,006";
c.第三级连动菜单的下拉选项,(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)
"001,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,0006";
.
.
.
第N级连动菜单的下拉选项,(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)
除了第一级没有子下拉选项option过滤值这一项外,其他子集都有子下拉选项option过滤值
3.实际可实现N级连动菜单,只要由当前菜单驱动它的子菜单即可,类似与责任链模式;
4.实际开发将
...中的3个方法放至在一个单独的脚本文件里面,并引入它,只要在页面调用方法即可,这样就会发现实现这个功能很简洁,调用的方法也很自然;5.下文举了4个例子,实际都一样,只是名字和样式不一样而已,名称后缀('_'下划线作为后缀的分隔符)不是必要的;
复制代码 代码如下:
sample1:
<selectname="sel_1"onChange="driverselect(this,'subsel_1',subopt)">
select>
<selectname="subsel_1"onChange="driverselect(this,'subsubsel_1',subsubopt)">
select>
<selectname="subsubsel_1">
select>
sample2:
<selectname="sel_2"onChange="driverselect(this,'subsel_2',subopt)">
select>
<selectname="subsel_2"onChange="driverselect(this,'subsubsel_2',subsubopt)">
select>
<selectname="subsubsel_2">
select>
sample3:
<selectname="selM_1"MULTIPLEsize="5"onChange="driverselect(this,'subselM_1',subopt)">
select>
<selectname="subselM_1"MULTIPLEsize="5"onChange="driverselect(this,'subsubselM_1',subsubopt)">
select>
<selectname="subsubselM_1"MULTIPLEsize="5">
select>
sample4:
<selectname="selM_2"MULTIPLEsize="5"onChange="driverselect(this,'subselM_2',subopt)">
select>
<selectname="subselM_2"MULTIPLEsize="5"onChange="driverselect(this,'subsubselM_2',subsubopt)">
select>
<selectname="subsubselM_2"MULTIPLEsize="5">
select>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]