js操作二次連携実装コード_javascriptスキル-jsチュートリアル-php.cn

テーブル構造
第 2 レベルまたはマルチレベルのリンクは主にデータベース内の親番号を持つテーブルに基づいており、これも例外ではありません
id、parent_id、name の 3 つの列。

js オペレーションの使用
まず、js にデータがどのように格納されるかについて説明します。
データの保存には主に 2 次元配列を使用します。構造は次のとおりです:
a[親番号]=[[子番号 1, 子名 1], [子番号 2, 子名 2], [子番号 3, 子名 3],…]; 🎜> まず、親番号を使用してすべての子データを取得し、ドロップダウンで子データの番号と名前をバインドします。

最初のステップは、第 2 レベルのリンケージデータです (方法これらのデータは後で取得します)

コードをコピーしますコードは次のとおりです:

var都市=新しい配列(); 
都市['00000000-0000-0000-0000-000000000000']=[['028db215-8bd7-45ab-bbaa-1efa175c35ca','長春'],['bcb32195-2a46- 4cd1-9472-6383e8fa55cc',' 瀋陽'] ]; 

var school=new Array(); 
schools['028db215-8bd7-45ab-bbaa-1efa175c35ca']=[['5f22403a- 7a59-4b7f-b62d-9451298cbd00','長春 1'],['e8f0f665-9a9a-4c44-83fd-598e8a28dcd7','長春 2']]; -a44e-8d169d715664','瀋陽 1']]; 🎜 >
 

第 1 レベルは都市データ、第 2 レベルは学校データです。 

2 番目のステップは、ドロップダウンに表示されるデータを設定することです

コードをコピーしますコードは次のとおりです: //親の番号に基づいて対応する子のデータを取得し、obj コントロールに表示します

//type=0 city, 1 school

// pid 親番号
//obj データを表示するドロップダウンへ 
function SetRegions(type,pid,obj) 
{ 
var text="選択してください"; 
var tempArray=new Array(); 
if(type==0){ 
tempArray=cities[pid]; 
} else if (type==1){ 
tempArray=schools[pid];; 
} 
if(tempArray!=null) 
{ 
for(var i=0;i text ="" tempArray[i][1] ""; 
} 
$( obj).html(text); 
} 

 


3 番目のステップで、都市が変更されると、学校データ 

コードをコピー

コードは次のとおりです: // 学校を設定します都市番号のサブデータfunction CityChanged(){

SetRegions (1,$("#cities").val(),"#schools");

 
4 番目のステップは、もちろん、初期化が必要な変更を行う場合です。これは、

をコピーする前の最大の悩みでもありました。 code

コードは次のとおりです: //市の学校の値を初期化します//cityId 市の番号//schoolId 学校番号

function InitRegions(cityId,schoolId)

{ 
//都市データを初期化します 
//SetRegions(0,"00000000-0000-0000-0000-000000000000","#cities"); /都市を検索し、デフォルト値として設定します
$("#cities option[value =" cityId "]").attr("selected","selected"); 
if(schoolId!=" 00000000-0000-0000-0000-000000000001"){ 
//学校データを初期化します
SetRegions(1,cityId,"#schools"); 
//学校を検索し、デフォルト値として設定します
$("#schools option[value=" schoolId "]").attr("選択済み", "選択済み") 
} 
} 

 

 
フロントエンドコード
 

コピーコード

コードは次のとおりです: <%--City--%> ;%--school--%>