DynamicOptionList連動(dòng)菜單代碼
更新時(shí)間：2007年09月25日 21:18:26 作者：
使用前請看一下說明，不會(huì)耽誤你多少時(shí)間，明白以后有助你快速實(shí)現(xiàn)這個(gè)小功能，實(shí)際上非常簡單，與你使用的開發(fā)語言也沒有什么關(guān)系：
1. <option selected value="all">==查看所有==</option>
這個(gè)下拉項(xiàng)可以保留或忽略，內(nèi)容如“==查看所有==”可替換為自己需要的內(nèi)容，value="all" 屬性可以獲得一個(gè)附加的全過濾顯示功能，建議保留:)
2.下拉菜單數(shù)據(jù)格式，（實(shí)際開發(fā)可以由后臺程序生成一個(gè)數(shù)據(jù)格式字符串，這個(gè)數(shù)據(jù)串格式和你查詢的表結(jié)構(gòu)應(yīng)該是一樣的，傳到模板上取得這個(gè)數(shù)據(jù)格式串即可，所有下拉菜單數(shù)據(jù)是一次傳到頁面上的，并且與你使用的語言開發(fā)實(shí)現(xiàn)沒有什么關(guān)系，只要你想辦法得到這個(gè)字符串格式就行了）如下：
a.第一級連動(dòng)菜單的下拉選項(xiàng)，格式為 (下拉選項(xiàng)option內(nèi)容,下拉選項(xiàng)option值;......)
"上海,01;江西,02";
b. 第二級連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
"01,徐匯區(qū),001;01,嘉定區(qū),002;01,黃浦區(qū),003;02,南昌市,004;02,九江市,005;02,上饒市,006";
c. 第三級連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過濾值,子下拉選項(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 級連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
除了第一級沒有子下拉選項(xiàng)option過濾值這一項(xiàng)外，其他子集都有子下拉選項(xiàng)option過濾值
3.實(shí)際可實(shí)現(xiàn)N級連動(dòng)菜單，只要由當(dāng)前菜單驅(qū)動(dòng)它的子菜單即可，類似與責(zé)任鏈模式；
4.實(shí)際開發(fā)將<head> ...</head> 中的3個(gè)方法放至在一個(gè)單獨(dú)的腳本文件里面，并引入它，只要在頁面調(diào)用方法即可，這樣就會(huì)發(fā)現(xiàn)實(shí)現(xiàn)這個(gè)功能很簡潔，調(diào)用的方法也很自然；
5.下文舉了4個(gè)例子，實(shí)際都一樣，只是名字和樣式不一樣而已,名稱后綴('_'下劃線作為后綴的分隔符)不是必要的；
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="javascript">
<!--
//測試用的一組數(shù)據(jù)
//第1級下拉菜單數(shù)據(jù)
var opt = "上海,01;江西,02";
//第2級下拉菜單數(shù)據(jù)
var subopt = "01,徐匯區(qū),001;01,嘉定區(qū),002;01,黃浦區(qū),003;02,南昌市,004;02,九江市,005;02,上饒市,006";
//第3級下拉菜單數(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對象的名稱返回這個(gè)對象，省略了你
* 直接操作document.getElementById的過程.
*
* 例如: $('默認(rèn)文本框的名稱').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è)輔助名稱后綴('_'下劃線作為后綴的分隔符),如果沒有這
* 個(gè)需要可以忽略 “_后綴”,只要設(shè)置一個(gè)普通的名稱即可.
*
* seldata :: 數(shù)據(jù)源，菜單的數(shù)據(jù)項(xiàng)(子下拉選項(xiàng)名稱，子下拉選項(xiàng)值，子下拉選項(xiàng)過濾值)
* filter :: 下拉選項(xiàng)的過濾條件
*
*/
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',顯示全部,用于連動(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++) {
//有過濾條件的下拉項(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);
}
}
}
//無過濾條件的下拉項(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('==沒有選項(xiàng)==','');
}else{
}
}
}
/*
* 連動(dòng)下拉列表的驅(qū)動(dòng)函數(shù)
*
* selname_src :: 當(dāng)前下拉選項(xiàng)(this)
*
* subselname_src :: 所要驅(qū)動(dòng)的子下拉選項(xiàng)的名稱（名稱結(jié)構(gòu)為: 名稱_后綴 或 名稱）
* 后綴是為了區(qū)分由程序動(dòng)態(tài)生成的如果有多個(gè)相同的下拉選項(xiàng)而設(shè)
* 置的一個(gè)輔助名稱后綴('_'下劃線作為后綴的分隔符),如果沒有這
* 個(gè)需要可以忽略 “_后綴”,只要設(shè)置一個(gè)普通的名稱即可.
*
* subseldata_src :: 數(shù)據(jù)源,被驅(qū)動(dòng)菜單的數(shù)據(jù)項(xiàng).
* 數(shù)據(jù)源格式 : (子下拉選項(xiàng)option過濾值,子下拉選項(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í)行]
1. <option selected value="all">==查看所有==</option>
這個(gè)下拉項(xiàng)可以保留或忽略，內(nèi)容如“==查看所有==”可替換為自己需要的內(nèi)容，value="all" 屬性可以獲得一個(gè)附加的全過濾顯示功能，建議保留:)
2.下拉菜單數(shù)據(jù)格式，（實(shí)際開發(fā)可以由后臺程序生成一個(gè)數(shù)據(jù)格式字符串，這個(gè)數(shù)據(jù)串格式和你查詢的表結(jié)構(gòu)應(yīng)該是一樣的，傳到模板上取得這個(gè)數(shù)據(jù)格式串即可，所有下拉菜單數(shù)據(jù)是一次傳到頁面上的，并且與你使用的語言開發(fā)實(shí)現(xiàn)沒有什么關(guān)系，只要你想辦法得到這個(gè)字符串格式就行了）如下：
a.第一級連動(dòng)菜單的下拉選項(xiàng)，格式為 (下拉選項(xiàng)option內(nèi)容,下拉選項(xiàng)option值;......)
"上海,01;江西,02";
b. 第二級連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
"01,徐匯區(qū),001;01,嘉定區(qū),002;01,黃浦區(qū),003;02,南昌市,004;02,九江市,005;02,上饒市,006";
c. 第三級連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過濾值,子下拉選項(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 級連動(dòng)菜單的下拉選項(xiàng)，(子下拉選項(xiàng)option過濾值,子下拉選項(xiàng)option內(nèi)容,子下拉選項(xiàng)option值;......)
除了第一級沒有子下拉選項(xiàng)option過濾值這一項(xiàng)外，其他子集都有子下拉選項(xiàng)option過濾值
3.實(shí)際可實(shí)現(xiàn)N級連動(dòng)菜單，只要由當(dāng)前菜單驅(qū)動(dòng)它的子菜單即可，類似與責(zé)任鏈模式；
4.實(shí)際開發(fā)將<head> ...</head> 中的3個(gè)方法放至在一個(gè)單獨(dú)的腳本文件里面，并引入它，只要在頁面調(diào)用方法即可，這樣就會(huì)發(fā)現(xiàn)實(shí)現(xiàn)這個(gè)功能很簡潔，調(diào)用的方法也很自然；
5.下文舉了4個(gè)例子，實(shí)際都一樣，只是名字和樣式不一樣而已,名稱后綴('_'下劃線作為后綴的分隔符)不是必要的；
復(fù)制代碼 代碼如下:
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="javascript">
<!--
//測試用的一組數(shù)據(jù)
//第1級下拉菜單數(shù)據(jù)
var opt = "上海,01;江西,02";
//第2級下拉菜單數(shù)據(jù)
var subopt = "01,徐匯區(qū),001;01,嘉定區(qū),002;01,黃浦區(qū),003;02,南昌市,004;02,九江市,005;02,上饒市,006";
//第3級下拉菜單數(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對象的名稱返回這個(gè)對象，省略了你
* 直接操作document.getElementById的過程.
*
* 例如: $('默認(rèn)文本框的名稱').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è)輔助名稱后綴('_'下劃線作為后綴的分隔符),如果沒有這
* 個(gè)需要可以忽略 “_后綴”,只要設(shè)置一個(gè)普通的名稱即可.
*
* seldata :: 數(shù)據(jù)源，菜單的數(shù)據(jù)項(xiàng)(子下拉選項(xiàng)名稱，子下拉選項(xiàng)值，子下拉選項(xiàng)過濾值)
* filter :: 下拉選項(xiàng)的過濾條件
*
*/
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',顯示全部,用于連動(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++) {
//有過濾條件的下拉項(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);
}
}
}
//無過濾條件的下拉項(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('==沒有選項(xiàng)==','');
}else{
}
}
}
/*
* 連動(dòng)下拉列表的驅(qū)動(dòng)函數(shù)
*
* selname_src :: 當(dāng)前下拉選項(xiàng)(this)
*
* subselname_src :: 所要驅(qū)動(dòng)的子下拉選項(xiàng)的名稱（名稱結(jié)構(gòu)為: 名稱_后綴 或 名稱）
* 后綴是為了區(qū)分由程序動(dòng)態(tài)生成的如果有多個(gè)相同的下拉選項(xiàng)而設(shè)
* 置的一個(gè)輔助名稱后綴('_'下劃線作為后綴的分隔符),如果沒有這
* 個(gè)需要可以忽略 “_后綴”,只要設(shè)置一個(gè)普通的名稱即可.
*
* subseldata_src :: 數(shù)據(jù)源,被驅(qū)動(dòng)菜單的數(shù)據(jù)項(xiàng).
* 數(shù)據(jù)源格式 : (子下拉選項(xiàng)option過濾值,子下拉選項(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í)行]
相關(guān)文章
關(guān)于腳本操作文本域的問題...2007-04-04
在一些網(wǎng)站進(jìn)行上傳時(shí)，當(dāng)單擊了“瀏覽”按鈕之后會(huì)彈出【選擇文件】的對話框。很多時(shí)候我們需要只上傳圖像文件，那么在彈出的【選擇文件】對話框中只顯示了相關(guān)圖片格式的文件，此外其余格式文件一律過濾不被顯示。2008-09-09
JavaScript關(guān)于select的相關(guān)操作說明
JavaScript關(guān)于select的相關(guān)操作參考代碼。2010-01-01
CSS3實(shí)現(xiàn)動(dòng)態(tài)背景登錄框的代碼
本文介紹了一款基于jQuery+CSS3實(shí)現(xiàn)的帶有動(dòng)畫效果的動(dòng)態(tài)背景登陸框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-07-07
用JS輸入email的代碼,以防垃圾郵件...2007-09-09
不錯(cuò)的一個(gè)限制同時(shí)選擇的復(fù)選框的最多個(gè)數(shù)2008-10-10
js 金額文本框?qū)崿F(xiàn)代碼，需要處理金額輸入的朋友可以參考下2012-02-02
javascript 動(dòng)態(tài)設(shè)置已知select的option的value值的代碼
當(dāng)已經(jīng)知道某個(gè)select options的值，判斷當(dāng)前select的options的值是否與已知的值相同，相同也設(shè)置下。一般用戶修改頁面。2009-12-12
我們有時(shí)候希望回車鍵敲在文本框（input element）里來提交表單（form），但有時(shí)候又不希望如此。2010-04-04
javascript實(shí)現(xiàn)的左右選擇框效果代碼
javascript實(shí)現(xiàn)的左右選擇框效果代碼...2007-10-10