毎日のプロジェクト開発段階では、ドロップダウンボックスの第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(州、都市);