クロスフレーム3レベル連携のjs操作ドロップダウンオプション選択例紹介

クロスフレーム3レベル連携のjs操作ドロップダウンオプション選択例紹介_javascriptスキル

WBOY

リリース： 2016-05-16 17:33:41

オリジナル

1345 人が閲覧しました

HTML、CSS、JavaScript の関連知識を使用して、マルチウィンドウおよびマルチメニューのコンテンツリンクを作成します。

フレーム、ブラウザオブジェクト、フォームコントロールの概念、JavaScript イベントトリガーメカニズムとプログラミング、
、および CSS を使用してテキスト表示を整理する習熟度を調べて、学生が DHTML をより深く理解できるようにします。理解。
実験内容【必ずやるべきこと】
(1) 3 つのフレームを含むウィンドウを作成します
(2) 最初のフレーム 1 には選択が含まれており、内容は中国の各省です
(3) 2 番目のフレームフレーム 2 にも、各省の県レベルの都市が含まれる選択が含まれています
(4) 3 番目のフレーム 3 は、特定の都道府県と都市の紹介を表示するために使用されます。
(５) フレーム 1 の選択で州を選択すると、フレーム 2 での選択により、選択可能な選択肢がその州内の都市に自動的に変更されます
(６) フレーム 2 の選択で特定の都市を選択した場合最後にframe3に都市の紹介文を表示します
(7) 紹介文はdiv内に収まり、左揃え、青文字、20px、1行目がインデントされている必要があります。

メニューリンケージリファレンスインターフェース効果

ヒント: この実験を実装するにはさまざまな方法があります (例: CSS バージョン、DOM バージョン、Ajax バージョン、プロトタイプバージョン) 、学生は実装方法を選択するだけで済みます。

メニュー連携テスト関連データ
江蘇
南京南京は江蘇省の首都であり、豊かな歴史的遺物と奥深い文化遺産を持つ六王朝の古都です。
台州台州は胡主席の生まれ故郷であり、麻雀、特に麻雀で有名です。
蘇州「上には天国があり、下には蘇州と杭州があります。」蘇州は、「謙虚な管理者の庭」、「獅子林」などの有名な庭園で有名であり、優れた人々と文人がいます。

浙江省
杭州杭州は浙江省の首都であり、美しい景色と地上の楽園があります。「上には天国があり、下には蘇州と杭州がある」と言われています。
温州は実業家として最も有名で、全国から嫌われている温州の不動産投機家がその代表です。
嘉興嘉興について唯一理解されているのは、嘉興南湖で開催された歴史的な会議だけです。

広東
広州広州は広東省の首都で、経済は発展していますが、犯罪が横行しています。
深センは国内初の経済特区で、経済は発展しており、移民がほとんどですが、治安は良くありません。
珠海珠海は私の国で最初の沿岸開放都市の一つであり、典型的な沿岸都市であり、住むのに適しています。

私は、すべての読者と怠け者が楽しめる、あまりクソ味のない js コードを書きました。
上記のコード:
1.frame_a.htm: 州のドロップダウンリストを表示します

コードをコピーコードは次のとおりです:

フレーム A

< ;フォーム名 = "フォーム 1" メソッド = "投稿" >

3.frame_c.htm: 対応する都市の説明
を表示します

コードをコピーします

コードは次のとおりです。

フレーム C
< ;/div> 

 

4,index.htm: グローバル フレームワーク、マスター コントロール ページ 
。 


コードをコピー
 コードは次のとおりです: 
 
 
 script language="javascript" type="text/javascript"> 
var states = new Array(); 
provinces[0] = "江蘇省" = "浙江省"; 
省[2] = "広東"; 
都市 = 新しい配列(); 
都市[0] = "南京"; ; 
都市[0][1] = "台州"; 
都市[1] = 新しい配列(); ][0] = "杭州"; 
都市[1][1] = "温州"; 
都市[2] = 新しい配列( ); 
都市[2][0] = "広州"; 
都市[2][2] = "珠海"; var description = new Array(); 
descriptions[0] = new Array(); 
descriptions[0][0] = "南京は、六つの王朝の古都、江蘇省の首都です。歴史的遺物と奥深い文化遺産 "; 
descriptions[0][1] = "台州は胡主席が生まれた千年の歴史のある県であり、王先生の故郷でもあります。麻雀、特に麻雀のこと。"; 
descriptions[0][ 2] = "上には天国があり、下には蘇州と杭州があります。有名な庭園には「謙虚な管理者の庭」があります。 "; 
descriptions[1] = new Array(); 
descriptions[1][0] = "杭州は浙江省の首都であり、美しい「上には天国があり、下には蘇州と杭州がある」と言われています。
descriptions[1][1] = 「温州はビジネスマンで最も有名です。温州のほとんどの人がビジネスマンです。」全国から嫌われている温州不動産投機家が代表格！ "; 
descriptions[1][2] = "嘉興についての私の理解は、嘉興南湖で開催された歴史的な会議の中にあります。"; 
descriptions[2] = new Array(); 
descriptions[2] ][0] = 「広州は広東省の首都で、経済は発展していますが、犯罪が蔓延しています。 "; 
descriptions[2][1] = "深センは国内初の経済特区です。経済が発展しており、人口のほとんどが移民で占められていますが、広州と同様に治安は良くありません。 "; 
descriptions[2][2] = "珠海は私の国で最初の沿岸開放都市の一つであり、美しい都市であり、典型的な沿岸都市であり、住むのに適しています。 "; 

var current_province; 
var current_city; 
function setCity(province, city) 
{ 
//alert("city"); 
//frame_b 
var obj = window.frames.frame_b.document.getElementById("s2"); 
var length = city[province].length 
for(i = 0; i obj[i] = 新しいオプション(都市[県][i]); 
obj[i].selected = "false"; 
} 
obj[都市].selected = true; 
current_city = city; 
setCityDescription(province, city); 
function setCityDescription(province, city) 
{ 
//alert("description"); //frame_c 
var obj = window.frames.frame_c.document.getElementById("description"); 
obj.innerHTML = description[県][市] 

} 

function setProvince(province) 
{ 
//alert("province"); 
// var obj = window.frames.frame_a.document.getElementById("s1"); / var obj = window.frames["frame_a"].document.getElementById("s1"); 
//var obj = window.frames[0].document.getElementById("s1"); / var obj = window.frames["frame_a"]; //.document.getElementById("s1"); // obj = obj.document.getElementById("s1"); .frames["frame_a"].document.getElementById("s1"); //Chromeのクロスドメインアクセスチェックはローカルでは表示できないため、サーバーにアップロードすると正しく表示されます。 
var length = states.length; 
for(i = 0; i < length; i) { 
obj[i] = new Option(provinces[i]); ].selected = "false"; 
obj[province].selected = "true"; 
current_province = 
var city = 0; ; 
//setCityDescription(県, 市); 

関数 init(県, 市) 
{ 
setProvince(県); ); 
setCityDescription(province, city); 
var obj = window.frames.frame_a.document.getElementById("s1"); 
obj.onchange = Function("setProvince(this.selectedIndex)" ); 
//alert(obj.selectedIndex); 

var obj = window.frames.frame_b.document.getElementById("s2"); current_province, this.selectedIndex)"); 
//alert(obj.selectedIndex); 
} 
 
 
 
 
 
 
 
< ;/フレームセット> 

5. 追記 : 
1) 柔軟性: function init(province, city) ページのオンロード時に、最初に表示する都市を指定できます。入札ランキングです。 
2) スケーラビリティ: 配列にデータ ソースを追加することで、より多くの都市のサポートを追加できます。データ ソースは、xml ファイルまたは ajax を介した動的データ ソースにすることができ、dom 操作を使用して実装できます。 
3) クロスドメインの問題: Chrome はフレームに対してクロスドメイン検査を実行するため、ローカルに設定しないとページを表示できません。ただし、サーバーには問題なくアップロードできます。 