|
|
1. <option selected value="all">==查看所有==</option>
這個下拉項可以保留或忽略，內容如“==查看所有==”可替換為自己需要的內容，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.實際開發將<head> ...</head> 中的3個方法放至在一個單獨的腳本文件里面，并引入它，只要在頁面調用方法即可，這樣就會發現實現這個功能很簡潔，調用的方法也很自然；
5.下文舉了4個例子，實際都一樣，只是名字和樣式不一樣而已,名稱后綴('_'下劃線作為后綴的分隔符)不是必要的；
復制代碼 代碼如下:
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="Javascript">
<!--
//測試用的一組數據
//第1級下拉菜單數據
var opt = "上海,01;江西,02";
//第2級下拉菜單數據
var subopt = "01,徐匯區,001;01,嘉定區,002;01,黃浦區,003;02,南昌市,004;02,九江市,005;02,上饒市,006";
//第3級下拉菜單數據
var subsubopt = "001,徐匯1區,0001;002,嘉定1區,0002;003,黃浦1區,0003;004,南昌1市,0004;005,九江1市,0005;006,上饒1市,0006";
/**
* get Element By Id or name.
* 根據一個dom對象的名稱返回這個對象，省略了你
* 直接操作document.getElementById的過程.
*
* 例如: $('默認文本框的名稱').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;
}
/*
* 自動填充一個下拉列表,一般用于填充連動菜單的第一項
*
* selname :: 當前下拉選項(this)
* 后綴是為了區分由程序動態生成的如果有多個相同的下拉選項而設
* 置的一個輔助名稱后綴('_'下劃線作為后綴的分隔符),如果沒有這
* 個需要可以忽略 “_后綴”,只要設置一個普通的名稱即可.
*
* seldata :: 數據源，菜單的數據項(子下拉選項名稱，子下拉選項值，子下拉選項過濾值)
* filter :: 下拉選項的過濾條件
*
*/
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) {
//過濾條件為'all',顯示全部,用于連動菜單
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++) {
//有過濾條件的下拉項(連動菜單數據格式)
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);
}
}
}
//無過濾條件的下拉項(非連動菜單數據格式)
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('==沒有選項==','');
}else{
}
}
}
/*
* 連動下拉列表的驅動函數
*
* selname_src :: 當前下拉選項(this)
*
* subselname_src :: 所要驅動的子下拉選項的名稱（名稱結構為: 名稱_后綴 或 名稱）
* 后綴是為了區分由程序動態生成的如果有多個相同的下拉選項而設
* 置的一個輔助名稱后綴('_'下劃線作為后綴的分隔符),如果沒有這
* 個需要可以忽略 “_后綴”,只要設置一個普通的名稱即可.
*
* subseldata_src :: 數據源,被驅動菜單的數據項.
* 數據源格式 : (子下拉選項option過濾值,子下拉選項option內容,子下拉選項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:第一個下拉菜單項
fillselect('sel_1',opt,'');
//初始化sample2:第一個下拉菜單項
fillselect('sel_2',opt,'');
//初始化sample3:第一個下拉菜單項
fillselect('selM_1',opt,'');
//初始化sample4:第一個下拉菜單項
fillselect('selM_2',opt,'');
//-->
</SCRIPT>
</body>
</html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
JavaScript技術：DynamicOptionList連動菜單代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
