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

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" メソッド = "投稿" >

<選択されたオプション> /SELECT>




2.frame_b.htm;特定の ID ドロップダウン リスト

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

フレーム B

" >
<選択されたオプション>

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 はフレームに対してクロスドメイン検査を実行するため、ローカルに設定しないとページを表示できません。ただし、サーバーには問題なくアップロードできます。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。