ドロップダウンボックスの2番目のレベルのリンケージ効果は、特に地域、品種などを含む複数のオプションがある場合、毎日のアプリケーションシナリオでしばしば遭遇します。たとえば、一般的な地方および市の連携ドロップダウンボックス、州を選択すると、都市リストも変更とともに変化します。
アイデア：
1.いわゆるリンケージ効果は、親レベルでデータが変化すると、関連する子レベルのデータ要素の変化に影響することを指摘しています。
以下は、建設された州と都市のデータです。
var linkdatas = {provinces：[{"code"： "code"、 "name"： "" "" code "：" 1 "、" name "：" beijing "}、{" code "：" 2 "、" name "：" tianjin "}、{code"： "" hebei "：" "" "" "" "" "" "" "" "" "" ode "：" "" "コード"： "" "" "コード"： "コード"： "name"： "hubei"}、{"code"： "5"、 "name"： "guangdong"}、{"code"： "6"、 "name"： "other"}]、cities：{0： ""： "please"]、1：["chaoyang地区"、 "haidian地区"、 "xicheng地区"、 "xicheng地区"、 2：["Tianjin"]、3：["cangzhou"、 "shijiazhuang"、 "Qinhuangdao"、 "other"]、4：["wuhan City"、 "Yichang City"、 "Xiangfan City"、 "other"]、5：["" shenzhen City "、" shenzhen City "" 「Zhuhai City "、" other "]、6：[" other "]}};2。データに基づいて動的にオプションノードを生成します。
関数アドポーション（ターゲット、オプション）{var optionele = null、ターゲット=ターゲット、オプション= options、optionlen = options.length; for（var i = 0; i <optionlen; i ++）{optionele = document.createelement（ 'option'）; optionele.value = option [i] .value; optionele.text = 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"： "code"、 "name"： "" "" code "：" 1 "、" name "：" beijing "}、{" code "：" 2 "、" name "：" tianjin "}、{code"： "" hebei "：" "" "" "" "" "" "" "" "" "" ode "：" "" "コード"： "" "" "コード"： "コード"： "name"： "hubei"}、{"code"： "5"、 "name"： "guangdong"}、{"code"： "6"、 "name"： "other"}]、cities：{0： ""： "please"]、1：["chaoyang地区"、 "haidian地区"、 "xicheng地区"、 "xicheng地区"、 2：["Tianjin"]、3：["cangzhou"、 "shijiazhuang"、 "Qinhuangdao"、 "other"]、4：["wuhan City"、 "Yichang City"、 "Xiangfan City"、 "other"]、5：["" shenzhen City "、" shenzhen City "" 「Zhuhai City "、" other "]、6：[" other "]}};関数アドポーション（ターゲット、オプション）{var optionele = null、ターゲット=ターゲット、オプション= options、optionlen = options.length; for（var i = 0; i <optionlen; i ++）{optionele = document.createelement（ 'option'）; optionele.value = option [i] .value; optionele.text = option [i] .text; Target.options.add（optionele）; }} function provenceScitySlink（pro、c）{var ld = linkdatas、provinces = ld.provinces、city = ld.citys、initcity = city [0]、probox = []; /*province*/ for（var i = 0; i <provinces.length; i ++）{probox.push（{"text"：provinces [i] .name、 "value"：butinces [i] .code}）} addoptions（pro、probox）; /*都市の初期化*/ addoptions（c、[{"text"：initcity、 "value"：initcity}]）; /*リンケージイベントを追加*/ 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）; }} var provinces = document.getElementById（ 'provinces'）、cities = document.getElementById（ 'Citys'）; ProvinceScitySlink（州、都市）;州および地方自治体のリンク効果の上記の単純な実装コード（推奨）は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。