|
|
1. <option selected value="all">==查看所有==</option>
這個(gè)下拉項(xiàng)可以保留或忽略，內(nèi)容如“==查看所有==”可替換為自己需要的內(nèi)容，value="all" 屬性可以獲得一個(gè)附加的全過(guò)濾顯示功能，建議保留:)
2.下拉菜單數(shù)據(jù)格式，（實(shí)際開(kāi)發(fā)可以由后臺(tái)程序生成一個(gè)數(shù)據(jù)格式字符串，這個(gè)數(shù)據(jù)串格式和你查詢(xún)的表結(jié)構(gòu)應(yīng)該是一樣的，傳到模板上取得這個(gè)數(shù)據(jù)格式串即可，所有下拉菜單數(shù)據(jù)是一次傳到頁(yè)面上的，并且與你使用的語(yǔ)言開(kāi)發(fā)實(shí)現(xiàn)沒(méi)有什么關(guān)系，只要你想辦法得到這個(gè)字符串格式就行了）如下：
a.第一級(jí)連動(dòng)菜單的下拉選項(xiàng)，格式為 (下拉選項(xiàng)option內(nèi)容,下拉選項(xiàng)option值;......)
"上海,01;江西,02";
b. 第二級(jí)連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過(guò)濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
"01,徐匯區(qū),001;01,嘉定區(qū),002;01,黃浦區(qū),003;02,南昌市,004;02,九江市,005;02,上饒市,006";
c. 第三級(jí)連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過(guò)濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
"001,徐匯1區(qū),0001;002,嘉定1區(qū),0002;003,黃浦1區(qū),0003;004,南昌1市,0004;005,九江1市,0005;006,上饒1市,0006";
.
.
.
第 N 級(jí)連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過(guò)濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
除了第一級(jí)沒(méi)有子下拉選項(xiàng)option過(guò)濾值這一項(xiàng)外，其他子集都有子下拉選項(xiàng)option過(guò)濾值
3.實(shí)際可實(shí)現(xiàn)N級(jí)連動(dòng)菜單，只要由當(dāng)前菜單驅(qū)動(dòng)它的子菜單即可，類(lèi)似與責(zé)任鏈模式；
4.實(shí)際開(kāi)發(fā)將<head> ...</head> 中的3個(gè)方法放至在一個(gè)單獨(dú)的腳本文件里面，并引入它，只要在頁(yè)面調(diào)用方法即可，這樣就會(huì)發(fā)現(xiàn)實(shí)現(xiàn)這個(gè)功能很簡(jiǎn)潔，調(diào)用的方法也很自然；
5.下文舉了4個(gè)例子，實(shí)際都一樣，只是名字和樣式不一樣而已,名稱(chēng)后綴('_'下劃線(xiàn)作為后綴的分隔符)不是必要的；
復(fù)制代碼 代碼如下:
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="Javascript">
<!--
//測(cè)試用的一組數(shù)據(jù)
//第1級(jí)下拉菜單數(shù)據(jù)
var opt = "上海,01;江西,02";
//第2級(jí)下拉菜單數(shù)據(jù)
var subopt = "01,徐匯區(qū),001;01,嘉定區(qū),002;01,黃浦區(qū),003;02,南昌市,004;02,九江市,005;02,上饒市,006";
//第3級(jí)下拉菜單數(shù)據(jù)
var subsubopt = "001,徐匯1區(qū),0001;002,嘉定1區(qū),0002;003,黃浦1區(qū),0003;004,南昌1市,0004;005,九江1市,0005;006,上饒1市,0006";
/**
* get Element By Id or name.
* 根據(jù)一個(gè)dom對(duì)象的名稱(chēng)返回這個(gè)對(duì)象，省略了你
* 直接操作document.getElementById的過(guò)程.
*
* 例如: $('默認(rèn)文本框的名稱(chēng)').value
* 就可以取得它的value
*/
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
/*
* 自動(dòng)填充一個(gè)下拉列表,一般用于填充連動(dòng)菜單的第一項(xiàng)
*
* selname :: 當(dāng)前下拉選項(xiàng)(this)
* 后綴是為了區(qū)分由程序動(dòng)態(tài)生成的如果有多個(gè)相同的下拉選項(xiàng)而設(shè)
* 置的一個(gè)輔助名稱(chēng)后綴('_'下劃線(xiàn)作為后綴的分隔符),如果沒(méi)有這
* 個(gè)需要可以忽略 “_后綴”,只要設(shè)置一個(gè)普通的名稱(chēng)即可.
*
* seldata :: 數(shù)據(jù)源，菜單的數(shù)據(jù)項(xiàng)(子下拉選項(xiàng)名稱(chēng)，子下拉選項(xiàng)值，子下拉選項(xiàng)過(guò)濾值)
* filter :: 下拉選項(xiàng)的過(guò)濾條件
*
*/
function fillselect(selname,seldata,filters) {
var sel = $(selname);
var data = seldata.split(";");
var filtersdata = filters.split(";");
var index = "";
var selkey = "";
var selvalue = "";
if(data.length > 0) {
//過(guò)濾條件為'all',顯示全部,用于連動(dòng)菜單
if(filtersdata[0] == 'all') {
sel.options[0] = new Option('==查看所有==','all');
for(i=0; i < data.length; i++) {
selkey = data[i].split(",")[1];
selvalue = data[i].split(",")[2];
sel.options[sel.length] = new Option(selkey,selvalue);
}
return;
}
sel.options[0] = new Option('==查看所有==','all');
for(i=0;i < data.length; i++) {
//有過(guò)濾條件的下拉項(xiàng)(連動(dòng)菜單數(shù)據(jù)格式)
if (data[i].split(",").length == 3) {
for(j=0; j < filtersdata.length; j++){
if( (data[i].split(",")[0] == filtersdata[j]) ) {
selkey = data[i].split(",")[1];
selvalue = data[i].split(",")[2];
sel.options[sel.length] = new Option(selkey,selvalue);
}
}
}
//無(wú)過(guò)濾條件的下拉項(xiàng)(非連動(dòng)菜單數(shù)據(jù)格式)
if (data[i].split(",").length == 2) {
selkey = data[i].split(",")[0];
selvalue = data[i].split(",")[1];
sel.options[sel.length] = new Option(selkey,selvalue);
}
}
if (sel.length == 1) {
sel.options[0] = new Option('==沒(méi)有選項(xiàng)==','');
}else{
}
}
}
/*
* 連動(dòng)下拉列表的驅(qū)動(dòng)函數(shù)
*
* selname_src :: 當(dāng)前下拉選項(xiàng)(this)
*
* subselname_src :: 所要驅(qū)動(dòng)的子下拉選項(xiàng)的名稱(chēng)（名稱(chēng)結(jié)構(gòu)為: 名稱(chēng)_后綴 或 名稱(chēng)）
* 后綴是為了區(qū)分由程序動(dòng)態(tài)生成的如果有多個(gè)相同的下拉選項(xiàng)而設(shè)
* 置的一個(gè)輔助名稱(chēng)后綴('_'下劃線(xiàn)作為后綴的分隔符),如果沒(méi)有這
* 個(gè)需要可以忽略 “_后綴”,只要設(shè)置一個(gè)普通的名稱(chēng)即可.
*
* subseldata_src :: 數(shù)據(jù)源,被驅(qū)動(dòng)菜單的數(shù)據(jù)項(xiàng).
* 數(shù)據(jù)源格式 : (子下拉選項(xiàng)option過(guò)濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
*
*/
function driverselect(selname_src,subselname_src,subseldata_src) {
var index = "", selkey = "", selvalue = "";
var selName="", selSuffix="";
var subselName="", subselSuffix="";
if(selname_src.name.split("_").length==2) {
selName=selname_src.name.split("_")[0];
selSuffix="_" + selname_src.name.split("_")[1];
}else{
selName=selname_src.name;
}
if(subselname_src.split("_").length==2) {
subselName=subselname_src.split("_")[0];
subselSuffix="_" + subselname_src.split("_")[1];
}else{
subselName=subselname_src;
}
var source = $(selName+selSuffix);
var target = $(subselName+subselSuffix);
target.length=1;
var filters = "";
for(j=0; j < source.length; j++) {
if(source[j].selected){
filters = filters + source[j].value + ';';
}
}
fillselect(target,subseldata_src,filters);
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
sample1:
<select name="sel_1" onChange="driverselect(this,'subsel_1',subopt)">
<option selected value="all">==查看所有==</option>
</select>
<select name="subsel_1" onChange="driverselect(this,'subsubsel_1',subsubopt)">
<option selected value="all">==查看所有==</option>
</select>
<select name="subsubsel_1">
<option selected value="all">==查看所有==</option>
</select>
<br><br>
sample2:
<select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)">
<option selected value="all">==查看所有==</option>
</select>
<select name="subsel_2" onChange="driverselect(this,'subsubsel_2',subsubopt)">
<option selected value="all">==查看所有==</option>
</select>
<select name="subsubsel_2">
<option selected value="all">==查看所有==</option>
</select>
<br><br>
sample3:
<select name="selM_1" MULTIPLE size="5" onChange="driverselect(this,'subselM_1',subopt)" >
<option selected value="all">==查看所有==</option>
</select>
<select name="subselM_1" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_1',subsubopt)">
<option selected value="all">==查看所有==</option>
</select>
<select name="subsubselM_1" MULTIPLE size="5">
<option selected value="all">==查看所有==</option>
</select>
<br><br>
sample4:
<select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)">
<option selected value="">==查看所有==</option>
</select>
<select name="subselM_2" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_2',subsubopt)">
<option selected value="">==查看所有==</option>
</select>
<select name="subsubselM_2" MULTIPLE size="5">
<option selected value="">==查看所有==</option>
</select>
<br><br>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
//初始化sample1:第一個(gè)下拉菜單項(xiàng)
fillselect('sel_1',opt,'');
//初始化sample2:第一個(gè)下拉菜單項(xiàng)
fillselect('sel_2',opt,'');
//初始化sample3:第一個(gè)下拉菜單項(xiàng)
fillselect('selM_1',opt,'');
//初始化sample4:第一個(gè)下拉菜單項(xiàng)
fillselect('selM_2',opt,'');
//-->
</SCRIPT>
</body>
</html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：DynamicOptionList連動(dòng)菜單代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
