JavaScript+PHP アプリケーション 1: Web ページ制作におけるダブル ドロップダウン メニューの動的実装

Web ページの制作では、メインのドロップダウン メニューを選択すると、サブドロップダウン メニューが動的に生成されるという状況がよく発生します。例：メインメニューには「フォーカスニュース」、「ライフスタイル」、「ムードストーリー」の3つがあり、「フォーカスニュース」を選択すると、「国内」、「海外」、「スポーツ」などのサブメニューが自動生成されます。 」、「エンターテイメント」など。

JavaScriptを使用すると、上記の効果を簡単に実現できます。しかし、問題は、メニューのオプションがデータベース (または他のファイル) から動的に抽出される場合、実装が簡単ではないことです。筆者の実践経験をもとに、javascript + phpを使った実装方法を紹介します。 この記事のデータベースはmysqlを使用しています。この例では、フォームを送信するたびにメニュー オプションの前の選択状態に戻る方法も紹介します。

記事内で紹介されているphpの機能はデータベースからメニューオプションを抽出することであり、もう1つの機能はJavaScriptコードを生成することです。読者は、ASP など、使い慣れた独自のインタープリター言語を使用できます。

コードを簡素化するために、メイン メニューは HTML で構築されていると仮定しています。サブメニューは動的デザインが必要なので、HTML コードは次のとおりです。

//メイン メニューのデザイン

フォーカス ニュース

ライフスタイル

ムードストーリー

//値は以下のメニュー配列と一致している必要があります

="smenu"> / /サブメニューのデザイン



考慮する必要があるのは、メニューの onchange() イベントに対して完了する必要がある手順です。一般的なプロセスは、メイン メニュー オプションに基づいてサブメニュー項目を構築することです。サブメニューの項目テキストは事前に設定しておくとよいでしょう。このアイデアに基づいて、作成者は JavaScript で結合された配列を使用してサブメニュー オプションを記録し、ロード時に PHP によって自動的に生成されます。したがって、作成者は次の JavaScript 関数 setmenu() を設計しました。

function setmenu(){

menu=array("a","b","c"); php //php プログラムを開始します

$db = new my_db();

$db->database = "***"; //ここでは phplib を使用します

$mmenu = array ("a","b","c"); //作者はここで簡略化しました

for ($i=0;$i
$id = $ mmenu [$i];

$db->query("select menu from class where menuid ='".$id."'");

//メニュー オプションが次のメニュー フィールドに格納されていると仮定します。クラステーブル、menuid はメニューを識別するための

while ($db->next_record()){

$smenu[] = """.$db->f("menu")"" です。 ";

}

if (isset($smenu) && is_array($smenu)){

$str = implode(",",$smenu);

echo "menu["$id"] =array ($str);ntt";

//メニューユニオン配列の入力を完了します

unset($smenu); //smenu変数を削除します

}

}

?> //phpを終了しますProgram

with (document) {

id= all("mmenu").value; // メインメニューの値を取得

arr_menu=menu[id];

for(i=all("smenu") ).options.length;i>=0;i- -){

all("smenu").options.remove(i); //元の項目をクリアする必要があります

}

if (arr_menu.length= =0){

return;

}

for(i=0;i
obj=createelement("option");

obj.text=arr_class[i];

all("smenu").options.add (obj);

}

}

}

このようにすると、ドキュメントが表示されるたびに、php 部分が JavaScript 言語として解釈され、メインメニューをクリックすると、サブメニューが自動的に更新されます。同様に、読者はこのアイデアに基づいて、より複雑な複数のメニュー オプションを作成できます。

最後に、著者は、フォームが送信された後にメニュー項目の最後の状態を維持する方法を簡単に紹介します。実際にはさまざまな手法がありますが、著者は陰的変数法を使用します。次のコードをフォームに追加します:



を追加するだけです。 onsubmit() イベントの各暗黙変数に値を割り当てます。つまり:

document.all("h1").value=document.all("mmenu").selectedindex;document.all("h2").value=document.all("smenu").selectedindex;

暗黙的な変数を使用するには、ドキュメント本体の onload() イベントで、php メソッド (その他のメソッド) を使用します。 ) を使用してメニューの表示を制御することもできます:


if (!isset($h1)){ // $h1

$h1 = 0 のみを判断する必要があります。 = 0;

}

echo "document.all("mmenu").selectedindex=".$h1.";ntt";

echo "document.all("mmenu").click();ntt" ;

echo "document.all("mmenu").selectedindex=".$h1.";ntt";

echo "document.all("smenu").selectedindex=".$h2?> ;

これまで、ダブルドロップダウンメニューの動的実装方法を説明しました。