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

メニュー|動的|Webページ|ドロップダウン

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

---インターネットからの抜粋

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

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

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

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

function setmenu(){
menu=array("a","b","c"); //构造menu联合数组
<?php //开始php程序
$db = new my_db();
$db->database = "***"; //构造新的mysql连接，这里使用了phplib
$mmenu = array("a","b","c"); //这里笔者作了简化
for ($i=0;$i<count($mmenu);$i++){
$id = $mmenu[$i];
$db->query("select menu from class where menuid =&#39;".$id."&#39;");
//假设菜单选项存放在class表的menu字段，menuid用来标识menu
while ($db->next_record()){
$smenu[] = """.$db->f("menu").""";
}
if (isset($smenu) && is_array($smenu)){
$str = implode(",",$smenu);
echo "menu["$id"] =array($str);ntt";
//完成menu联合数组的填充
unset($smenu); //删除smenu变量
}
}
?> //结束php程序
with (document) {
id=all("mmenu").value; //获得主菜单的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<arr_menu.length;i++){
obj=createelement("option");
obj.text=arr_class[i];
all("smenu").options.add(obj);
}
}
}

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

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

必要なのは、フォーム form の onsubmit() イベント内の各暗黙変数に値を割り当てることだけです。つまり:

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

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

暗黙的な変数を利用するために、ドキュメント本体の onload() イベントで、PHP メソッド (他のメソッドも使用可能) を使用してメニューの表示を制御します。ここまでで、ダブル ドロップダウン メニューの実装のダイナミクスを実装しました。