アイデア: 各ドロップダウン メニューは、コンポーネントとして一連のデータを受け取り、さまざまなデータ コンテンツに基づいてさまざまなメニュー オプションを生成できます。 3 つのレベル間の相関関係は、イベントのスローによって実現されます。データはバックグラウンドから取得されます。
省メニューをクリックして陝西省を選択すると、メニュー コンポーネントはイベントスローを通じて現在の省をスローします。州を知ると、その州内の都市データをバックグラウンドから取得できます。等々。
実現効果：
## URL: http://10.9.72.245:4010
## メソッド: "GET"
## データ形式:
リクエスト: QueryString
応答: JSON
1. http://10.9.72.245:4010/getProvince
2. http://10.9.72.245:4010/getCity 3. http://10.9.72.245:4010/getCounty
インターフェース名を取得します: /getProvince
Request
: パラメータなし
応答: { "province":["Beijing","Tianjin","Hebei",...]}
インターフェイス名:/getCity
request:?province="Hebei"
応答: {"city ":["石家荘" , "唐山", "秦皇島",...]}
インターフェイス名: /getCounty
要求: ?city="石家荘"
応答: {"county":["長安区", "Qiaodong District", "Qiaoxi District",...]}
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>ドキュメント</title>
</head>
<本文>
<script type="モジュール">
'./js/QueryString.js' から QueryString をインポートします。
'./js/DropDownMemu.js' から DropDownMemu をインポートします。
cityInfo = {}; にします。
init();
関数 init(){
ajax("http://10.9.72.245:4010","getProvince").then(successFunction).catch(failFunction);
}
// ajax通信が成功したら実行:
関数成功関数(_data){
let data = JSON.parse(_data);
let key = Object.keys(data)[0];
データ = オブジェクト.値(データ)[0];
if(DropDownMemu.Obj[キー]){
DropDownMemu.Obj[キー].list = データ;
DropDownMemu.Obj[key].name = データ[0];
}それ以外{
let memu = new DropDownMemu(key);
memu.addEventListener("変更",changeHandler);
memu.list = データ;
memu.name =データ[0];
memu.appendTo("本体");
cityInfo[キー] = データ[0];
}
}
// メニューの表示内容が変更された場合、メニューによってスローされたイベントを受信し、イベントに含まれる情報 ({"province":"Shaanxi"} や {"city":"Xi'an"} など) を取得します。
関数changeHandler(e){
let key = e.currentTarget.label;
cityInfo[キー] = e.data[キー];
let インターフェース名;
if(e.data.province){
インターフェース名 = "getCity";
}else if(e.data.city){
インターフェース名 = "getCounty";
}それ以外{
戻る
}
ajax（ "http://10.9.72.245:4010"、interfaceName、cityinfo）。
}
/*
ajax通信:
パラメータリスト:
URL：バックグラウンドサービスアドレスインターフェイスタイプ：「GetProvince」などのインターフェイスタイプ
データ：送信されたデータ、例：{"province"： "shaanxi"}
通信タイプ type：デフォルト 「GET」 json形式でデータを送信するかリクエスト：デフォルトはfalse
*/
関数ajax（url、interfaceType、data、type = "get"、json = false）{
type = type.toUpperCase();
let o = type==="GET"? null : データ;
if（data）data = json.stringify（data）：querystring.stringify（data）;
それ以外の場合はデータ = "";
return new Promise(function(resolve,reject){
let xhr = 新しい XMLHttpRequest();
xhr.open（type、url + "/" + interfaceType +（type === "get"？ "？" + data： ""））;
xhr.send(o);
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
解決(xhr.response);
}else if(xhr.readyState===4){
解決(xhr.status);
}
}
xhr.onerror= 関数(){
拒否(xhr.response);
}
})
}
// ajax通信が失敗した場合、関数failfunction（_err）{実行機能障害（_err）を実行します
console.log（_err）;
}
</script>
</body>
</html> "./component.js"からのドロップダウンメムクラスインポートコンポーネント ";
デフォルトのクラスDropDownMemuをエクスポートするコンポーネント{
_list; //現在のドロップダウンオプション。
_Name; //表示される名前：「Beijing」
ラベル。//現在のドロップダウンメニューのラベル
scanLabel; // ラベルコンテナspanCaret; // ドロップダウンオプションコンテナ bool=false; // マウスイベント、フォーカス状態または選択を制御し、マウスのスライドインおよびスライドアウト効果をトリガーしません。
//さまざまな状態に従って、ドロップダウンメニューのスタイルを設定します。
静的ドロップダウン= symbol（）;
static default = symbol（）;
// 静的グローバル変数は、ドロップダウン メニューが作成されるたびにこのオブジェクトに保存され、作成された各ドロップダウン メニューはグローバルに管理されます。
静的obj = {};
コンストラクター（_label）{
super（ "p"）;
this.label = _label;
// html構造を作成しますthis.render（）;
//スタイルを設定this.setStyle（）;
// マウスがスライドしてクリックし、フォーカスが外れ、クリック イベント this.elem.addEventListener("focusin", e =>this.mouseHandler(e));
this.elem.addEventListener("focusout", e =>this.mouseHandler(e));
this.elem.addeventlistener（ "mouseenter"、e => this.mousehandler（e））;
this.elem.addeventlistener（ "mouseleave"、e => this.mousehandler（e））;
this.elem.addeventlistener（ "click"、e => this.mousehandler（e））;
}
マウスハンドラー（e）{
switch（e.type）{
ケース「Mouseenter」：
if（this.bool）return
this.elem.style.backgroundcolor = "＃e6e6e6";
壊す;
ケース「マウスリーブ」:
if(this.bool) 戻り値
this.elem.style.backgroundColor = "#fff";
壊す;
ケース「フォーカスイン」:
this.setState(DropDownMemu.DROPDOWN);
this.bool = true;
壊す;
「フォーカスアウト」の場合:
this.setState（dropdownmemu.default）;
this.bool = false;
ケース「クリック」：
if(e.target.constructor !== HTMLLIElement) 戻り値
this._name = e.target.textcontent;
//クリック時に現在表示されているコンテンツを変更し、スタイルをリセットし、イベントをスローして、現在のコンテンツを外部の世界に通知します。
this.setContent（）;
let evt = new FocusEvent("focusout");
this.elem.dispatchEvent(evt);
}
}
set name（_name）{
this._name = _name;
this.setContent（）;
}
get name（）{
this._name;
}
set list（_list）{
this._list = _list;
this.ul.innerhtml = "";
this.ul.appendChild(this.createLi());
}
//メニューの現在表示されているコンテンツを変更し、データsetcontent（_name）をスローする{
this._name = _name || this._name;
this.spanlabel.textcontent = this._name;
let evt = new MouseEvent（ "Change"）;
if（！evt.data）evt.data = {}
evt.data[this.label] = this._name;
this.dispatchevent（evt）;
}
//指定されたリストに基づいて、ドロップダウンメニューオプションを作成します。
createli（_list）{
this._list = _list this._list;
let elem = document.createDocumentFragment();
this._list.forEach((項目, インデックス) => {
let li = document.createElement("li");
li.textcontent = item;
Object.assign(li.style, {
LineHeight： "26px"、
パディング：「0 15px」、
})
Elem.AppendChild（li）;
})
要素を返します。
}
setState（タイプ）{
switch（type）{
ケース DropDownMemu.DROPDOWN:
this.elem.style.backgroundColor = "#e6e6e6";
this.ul.style.display = "block";
壊す;
ケースドロップダウンメムdefault：
this.elem.style.backgroundcolor = "#fff";
this.ul.style.display = "none";
壊す;
}
}
appendto（親）{
super.appendto（parent）;
dropdownmemu.obj [this.label] = this;
}
与える（） {
this.elem.setattribute（ "tabindex"、1）;
this.spanlabel = document.createelement（ "span"）;
this.spancaret = document.createelement（ "span"）;
this.ul = document.createelement（ "ul"）;
this.elem.appendChild（this.ul）;
this.spanlabel.textcontent = this._name;
this.elem.appendChild(this.spanLabel);
this.elem.appendChild（this.spancaret）;
}
setStyle（）{
Object.Assign（this.elem.style、{
フロート: "左"、
minHeight: "20px",
minWidth: "80px",
色：「＃333」、
フォント級：「通常」、
TextAlign：「Center」、
Whitespace： "Nowrap"、
verticalAlign：「ミドル」、
カーソル: "ポインタ"、
国境：「1px solid #ccc」、
borderradius： "4px"、
BackgroundColor： "#fff"、
パディング：「6px 12px」、
fontsize： "14px"、
userselect：「none」、
マージンライト：「100px」、
ポジション：「相対」、
});
Object.Assign（this.spanlabel.style、{
フロート：「左」、
パディング：「0 5px」
})
Object.Assign（this.spancaret.style、{
ディスプレイ：「インラインブロック」、
verticalAlign：「ミドル」、
BorderTop：「4px Dashed」、
Borderright：「4px Solid透明」、
BorderLeft：「4px Solid透明」、
})
Object.Assign（this.ul.style、{
ListStyle：「なし」、
位置: "絶対"、
トップ：「100％」、
左： "0"、
Zindex：「1000」、
ミニ幅：「100px」、
パディング：「5px 0px」、
マージン： "2px 0 0"、
fontsize： "14px"、
TextAlign：「左」、
BackgroundColor： "#fff"、
境界線：「1pxソリッドRGBA（0、0、0、0.15）」、
borderradius： "4px"、
Boxshadow： "0 6px 12px rgba（0、0、0、0.175）"、
ディスプレイ：「なし」、
})
}
} デフォルトのクラスコンポーネントをエクスポートしますextenttarget {
エレム;
コンストラクター（_type）{
素晴らしい（）;
this.elem = this.createelem（_type）;
}
createElem（_type）{
lem = document.createelement（_type）;
要素を返します。
}
appendto（親）{
if（typeof parent === "string"）parent = document.queryselector（parent）;
parent.appendChild（this.Elem）;
}
} let http = require（ "http"）;
querystring = require（ "querystring"）;
データをしましょう、
要求、
res;
//すべての都市データを読み取り、それらをオブジェクトに解析し、それらを同期して読み取ります。
fs = require（ "fs"）;
let allcityinfo = json.parse（fs.readfilesync（ './ city.json'））;
サーバー= http.createServer（リスナーハンドラー）;
server.listen（4010、 "10.9.72.245"、ristenerdonehandler）;
functionリスナーハンドラー（_req、_res）{
req = _req;
res = _res;
res.writehead（200、{
「コンテンツタイプ」：「テキスト/html; charset = utf-8」、
「アクセスコントロール - アロウオリジン」：「*」、
「Access-Control-Allow-Headers」：「*」
});
data = "";
req.on（ "data"、function（_data）{
data = _data;
})
req.on（ "end"、receivehandler）;
}
関数受信handler（）{
// console.log（allcityinfo）;
//リクエストヘッダーのURLに従ってインターフェイスタイプを解析しますtype = req.url.trim（）。split（ "？"）[0] .replace（/ // g、 ""）;
console.log（type）;
//リクエストヘッダーのURLに従って着信パラメーターを解析するif（req.method.touppercase（）=== "get"）{
if（req.url.includes（ "favicon.ico"））return res.end（）;
else data = req.url.includes（ "？"）？
}
試す{
data = json.parse（data）;
}キャッチ{
data = querystring.parse（data）;
}
console.log（data）;
//インターフェイスタイプに基づいてデータを見つけます。
let list = {};
switch（type）{
ケース「GetProvince」：
list.province = object.keys（allcityinfo）;
壊す;
ケース「GetCity」：
list.city = object.keys（allcityinfo [data.province]）;
壊す;
ケース「GetCounty」：
list.county = allcityinfo [data.province] [data.city];
壊す;
}
console.log（list）;
res.write(JSON.stringify(list));
res.end（）
}
function ristenerdonehandler（）{
console.log（ "サービスが正常に開始された"）;
} {{
「北京」：{
「北京」：[「Dongcheng地区」、「Xicheng地区」、「チョンウェン地区」、「Xuanwu地区」、「Chaoyang地区」、「Fengtai地区」、「Shijingshan地区」、「Haidian District」、「Mentougou District」 「Fangshan地区」、「Tonghou地区」、「Shunyi地区」、「チャンピング地区」、「ダックス地区」、「ピンググ地区」、「Huairou地区」、「Miyun郡」、「Yanqing郡」、「その他」}
} 、
「Tianjin」：{
「Tianjin」：[「Heping District」、「Hedong District」、「Hexi District」、「Nankai District」、「Hebei District」、「Hongjiao District」、「Binhai New District」、「Dongli District」、「Xiqing District」地区」、「ジナン地区」、「ベイチェン地区」、「ニンゲ地区」、「ウーチン地区」、「ジンハイ郡」、「バオディ地区」、「ジクシアン」、「タンググ地区」、「ハン地区」、「ダガン地区」 "、" baodi地区 "、"その他 "]
}、
}
上記は、JSを使用した3レベルのリンクメニューの詳細な説明です（アイデアの説明付き）。詳細については、PHPの他の関連記事に注意してください中国のウェブサイト！
