毎日のプロジェクト開発段階では、ドロップダウンボックスの第2レベルのリンケージ効果がよく見られます。特に、地域、品種などを含む複数のオプションがある場合。たとえば、州を選択すると、一般的な地方および市のリンケージドロップダウンボックスがさらに変わります。
アイデア：
1.いわゆるリンケージ効果は、親レベルでデータが変化すると、関連する子レベルのデータ要素の変化に影響することを指摘しています。
以下は、建設された州と都市のデータです。
var linkdatas = {provinces：[{"code"： "0"、 "name"： "お願いします"}、{" code "：" 1 "、" name "：" beijing "}、{" code "：" 2 "、" name "：" tianjin "}、{" code "：" 3 "、" name "：" hebei "}、{" code "：" 4 "、" name "：" hubei "}、{" code "：" 5 "、" name "：" guangdong "}、{" code "：" 6 "、" na me "：" other "}]、都市：{0：[" please select "]、1：[" chaoyang地区 "、"ハイディア地区 "、「ドンチェン地区"、 "xicheng地区"、 "fangshan地区 "、" other "]、2：[" Tianjin "]、3：[" cangzhou "、" shijiazhuang "、" Qinhuangdao "、" other "]、4：[" wuhan City "、" Yichang City "、" Xifan City "、" other "]、5：[" shantu都市 "、" Foshan City "、" Zhuhai City "、" other "]、6：[" other "]}};2。データに基づいて動的にオプションノードを生成します。
関数アドポーション（ターゲット、オプション）{var optionele = null、ターゲット=ターゲット、オプション= options、optionlen = options.length; option [i] .text; target.options.add（optionele）;}}3。上記の州および市のデータによると、コードは「州レベル」を指す識別子を表し、州のデータが変更されると、変更イベントが開始されます。
pro.onchange = function（）{console.log（this）; var ct = city [this.value]、ctlen = ct.length、ctbox = []; c.innerhtml = ""; /*city*/ for（var j = 0; j <ctlen; j ++）{ctbox.push（{"text"：ct [j]、 "value"：ct [j]}）;} addoptions（c、ctbox）;}HTMLコード：
<div> <h3>プルダウンボックスリンケージエフェクト</h3> <p>州：<select name = "provinces" id = "provinces"> </select> </p> <p> city：<select name = "citys" id = "citys"> </select> </p> </div>
すべてのJavaScriptコード：
var linkdatas = {provinces：[{"code"： "0"、 "name"： "お願いします"}、{" code "：" 1 "、" name "：" beijing "}、{" code "：" 2 "、" name "：" tianjin "}、{" code "：" 3 "、" name "}を選択します。 "hebei"}、{"code"： "4"、 "name"： "hubei"}、{"code"： "5"、 "name"： "guangdong"}、{"code"： "6"、 "name"： 「その他」}]、都市：{0：["please select"]、1：["chaoyang地区"、 "ハイディア地区"、「ドンチェン地区 "、" xicheng地区 "、" fangshan地区 "、" other "]、2：[" Tianjin "]、3：[" cangzhou "、" shijiazhuang "、" Qinhuangdao "、" other "]、4：[" wuhan City "、" Yichang City "、" Xifan City "、" other "]、5：[" shantu都市 "、" Foshan City "、" Zhuhai City "、" other "]、6：["その他 "]}}; function addoptions（ターゲット、オプション）{var optionele = null、ターゲット=ターゲット、options = options = options.lengt.length; option [i] .value; optionele.text = option = option [i] .text; target.options.add（optionele）;}} function provinceScitySlink（pro、c）{var ld = linkdatas、provinces = ld.provinces、city = ld.citys、initcity = city = for [0]; <probinces.length; i ++）{probox.push（{"text"： "buale"：buale "：provinces [i] .code}）} addoptions（pro、probox）;/*city*/addoptions（c、[{" text "：" initcity "：initcity"：initcity "：initcity"：initcity "：initcity"：initcity）; function（）{console.log（this）; var ct = city [this.value]、ctlen = ct.length、ctbox = []; c.innerhtml = ""; /*city*/ for（var j = 0; j <ctlen; j ++）{ctbox.push（{"text"：ct [j]、 "value"：ct [j]}）;} addoptions（c、ctbox）;}} var provinces = document.getelementbyid（ 'proves = citys = citys = citys = document.getElementById（ 'Citys'）; ProvinceScitySlink（州、都市）;