js操作二次連携実装コード_javascriptスキル

テーブル構造
第 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("選択済み", "選択済み")
}
}




フロントエンドコード

コピーコード

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