DynamicOption List連動メニューコード
14982 ワード
使う前に説明を見てください。どれぐらいの時間がかかりますか？分かりましたら、この小さな機能を素早く実現するのに役立ちます。実はとても簡単です。あなたが使っている開発言語と関係がありません。 <オプト selected value=「all」==すべてを見る= このドロップは保留または無視できます。内容は「==すべてを確認する=」というように自分の必要な内容に置き換えられます。value=「all」 プロパティは、追加の全フィルタ表示機能を得ることができます。保留を推奨します。2.プルダウンメニューデータフォーマット、（実際の開発はバックグラウンドプログラムでデータフォーマット文字列を生成できます。このデータ列フォーマットはあなたが照会したテーブル構造と同じです。テンプレートにこのデータフォーマット列を取得すればいいです。すべてのプルダウンメニューデータは一回にページにアップロードされます。そして、あなたが使っている言語開発の実現には関係がありません。この文字列フォーマットを何とか手に入れたらいいです。a.第一級連動メニューのプルダウンオプションは、フォーマットは次の通りです。 (ドロップダウンオプションのoptionの内容、ドロップダウンオプションのoption値、...）"上海、01江西「02」b. 第二級連動メニューのドロップダウンオプション（サブドロップオプションoptionフィルタ値、サブドロップダウンオプションoption内容、サブドロップダウンオプションoption値；…）01,徐匯区，001;01,嘉定区，002;01,黄浦区，003;02,南昌市，004;02,九江市，005;02,上饒市c. 第三級連動メニューのドロップダウンオプション、サブドロップオプションのオプトフィルタ値、サブドロップダウンオプションのオプトイン内容、サブドロップダウンオプションのオプト値、…001,徐匯1区，0001;002,嘉定1区，0002;003,黄浦1区，0003;004,南昌1市，0004;005,九江市，0005;006,上饒1市，0006."第 N 級連動メニューのドロップダウンオプション（サブドロップダウンオプションのオプトフィルタ値、サブドロップダウンオプションのオプトコンテンツ、サブドロップダウンオプションのオプト値）第1レベルにサブドロップオプションのoptionフィルタ値がない以外に、他のサブセットにはサブドロップオプションのoptionフィルタ値があります。実際にNレベルの連動メニューが実現できます。現在のメニューでサブメニューを駆動すればいいです。チェーンモードと似ています。4.実際の開発は ... の3つの方法を別々のスクリプトファイルに入れて、それを導入します。ページでの呼び出し方法さえあれば、この機能はとても簡潔で、呼び出す方法も自然です。5.以下に4つの例を挙げましたが、実際には同じです。名前と様式が違っているだけです。名前の拡張子(''''u')サフィックスの区切りとして下線が必要ではありません。List sample 1:subsel_1"<sample 2:subsel_2「onchange=」driverselect（this，'subsubsel_2'，subsubopt)<>sample 3:subselM_1「multiple=」multiple「size=」5「onchange=」driverselect1'，subsubopt)<>sample 4:subselM_2「multiple=」multiple「size=」5「onchange=」driverselect2'，subsubopt)<>初期化sample 1:最初のプルダウンメニュー項目fillselect('sel_)1'，opt'')///初期化sample 2:最初のプルダウンメニュー項目fillselect('sel_)2'，opt'')///初期化sample 3:最初のプルダウンメニュー項目fillselect('selM_1'，opt'')///初期化sample 4:最初のプルダウンメニュー項目fillselect('selM_2'，opt，'')//>[Ctrl+A全選択注：]
<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>