この記事の例は、参照用のJSドロップダウンメニューの特殊効果を共有しています。特定のコンテンツは次のとおりです
例1：リンクされた地方および市のドロップダウンメニュー
オンチェンジイベントは、ドメインのコンテンツが変更されたときに発生します。
<script type = "text/javascript"> var arr = new Array（）; //データアレイ//データ、構造：id、name、parent id arr [arr.length] = [1、 'Beijing'、null]; arr [arr.length] = [2、 'sichuan'、null]; arr [arr.length] = [3、 'guangdong'、null]; arr [arr.length] = [4、 'Beijing'、1]; arr [arr.length] = [5、 'chengdu'、2]; arr [arr.length] = [6、 'guangzhou'、3]; arr [arr.length] = [7、 'Shenzhen'、3]; //プルダウンアイテム関数の動的設定（タイプ）{if（type == 'province'）{//州のドロップダウンメニューvar province = document.getElementbyId（ "butince"）; province.innerhtml = ''; // content first // sub-character var prostr = '<option value = ""> </option>'; //（var i = 0; i <arr.length; i ++）{var item = arr [i];の配列を転送します。 //現在のアイテム//親IDがない場合、それは州です（item [2] == null）prstr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } provence.innerhtml = prstr; //新しいコンテンツに記入} else} else if（type == 'city'）{//現在の州のIDを取得しますvar currproid = document.getElementbyid（ "butince"）。value; if（currproid == ''）falseを返します。 //都市のドロムドロップダウンメニューvar city = document.getElementById（ "City"）を取得します。 city.innerhtml = ''; //最初にコンテンツに記入します//（var i = 0; i <arr.length; i ++）{var item = arr [i]; //現在のアイテム//それが現在の保存されている都市であるかどうかを判断する場合（item [2] == currproid）citystr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } city.innerhtml = citystr; //新しいコンテンツを入力}} </script> <body style = "text-align：center;" onload = "filloptions（ 'province'）;"> <！ - define dropdownメニュー - >節約：<select id = "provence" onchange = "filloptions（ 'city'）"> </select> <br/> <br/> city：<select id = "city"> </select> <br/> </body> </body>例2：州、都市、郡の3レベルのつながりドロップダウンメニュー
<script type = "text/javascript"> var arr = new Array（）; //データアレイ//データ、構造：id、name、parent id arr [arr.length] = [1、 'Beijing'、null]; arr [arr.length] = [2、 'sichuan'、null]; arr [arr.length] = [3、 'guangdong'、null]; arr [arr.length] = [4、 'Beijing'、1]; arr [arr.length] = [5、 'chengdu'、2]; arr [arr.length] = [6、 'guangzhou'、3]; arr [arr.length] = [7、 'Shenzhen'、3]; arr [arr.length] = [8、 'wuhou地区'、5]; arr [arr.length] = [9、 'Qingyang District'、5]; arr [arr.length] = [10、 'baiyun地区'、6]; arr [arr.length] = [11、 'Zengcheng City'、6]; arr [arr.length] = [12、 'Conghua City'、6]; //プルダウンプロジェクト関数filloptions（type）の動的設定{if（type == 'province'）{//州のドロップダウンメニューvar province = document.getElementById（ "butince"）; province.innerhtml = ''; //コンテンツが最初に空ですfor（var i = 0; i <arr.length; i ++）{//配列var item = arr [i]; //現在のアイテム//親IDがない場合、それは州です（item [2] == null）prstr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } stavince.innerhtml = prostr; //新しいコンテンツに入力} else if（type == 'city'）{//現在の州のIDを取得var currproid = document.getElementById（ "stavince"）。value; if（currproid == ''）falseを返します。 //都市のドロムドロップダウンメニューvar city = document.getElementById（ "City"）を取得します。 city.innerhtml = ''; // content first first // city charters var citystr = '<option value = ""> </option>'; for（var i = 0; i <arr.length; i ++）{//配列var item = arr [i]; //現在の項目//それが現在保存されている都市であるかどうかを判断します（item [2] == currproid）citystr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } city.innerhtml = citystr; //新しいコンテンツに記入} else} else} if（type == 'area'）{//現在の都市var currcityid = document.getelementbyid（ "city"）。valueのIDを取得します。 if（currcityid == ''）falseを返します。 //地区および郡のドロップダウンメニューのDomを取得しますvar area = document.getElementById（ "area"）; area.innerhtml = ''; //地区および郡のキャラクターに記入var areastr = '<option値= ""> </option>'; for（var i = 0; i <arr.length; i ++）{//配列var item = arr [i]; //現在の項目//それが現在の都市の下の地区または郡であるかどうかを判断します（項目[2] == currcityid）areastr+= '<option value ='+item [0]+'>'+item [1]+'</option>'; } area.innerhtml = airestr; //新しいコンテンツを入力}} </script> <body style = "text-align：center;" onload = "filloptions（ 'province'）;"> <！ - ドロップダウンメニューを定義します - >州：<select id = "provence" onchange = "filloptions（ 'city'）"> </select> <br/> <br/> city：<select id = "city" onchange = "filloptions（ 'reage'） id = "area"> </select> <br/> <br/> </body>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。