- ベストアンサー
プルダウンを使った店舗検索画面の作成方法
- プルダウンを使った店舗検索画面を作成する方法について教えてください。
- 初心者ですが、上手くいかないので助けが必要です。
- プルダウンで地区を選び、店舗をクリックすると設定した領域に店舗紹介のhtmlを表示させたいです。
- 2pola4
- お礼率63% (33/52)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
申し訳ありませんでした。 ClearPref() が正常に動作していませんでしたので、 こちらで修正してみました。 以下が、全ソースです。 alert();は確認用ですので、削除してください。 ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ <script language="javascript"> <!--// var strDivision = new Array("北海道・東北","関東","北陸・東海・甲信越","近畿・中国・四国","九州・沖縄"); var strPrefKita = new Array("札幌店","北海道営業所","盛岡店","仙台店","山形店","酒田店"); var strURLKita = new Array("sapporo.htm","hokkai.htm","morioka.htm","sendai.htm","yamagata.htm","sakata.htm","a07.html"); var strPrefKanto = new Array("水戸店","高崎店","昭島店","宇都宮店","足利店","相模原店","新宿店","六本木店","大宮店","船橋店"); var strURLKanto = new Array("mito.htm","takasaki.htm","akisima.htm","utunomiya.html","asikaga.htm","sagami.htm","sinjuku.htm","roppongi.htm","oomiya.htm","funa.htm"); function SelectPref() { var nSelectIndex1 = 0; var nSelectIndex = 0; var param2; nSelectIndex1 = document.frmSample.lstPref.value; nSelectIndex = document.frmSample.lstDivision.value; if (strDivision[nSelectIndex] == "北海道・東北") { param2 = strURLKita[nSelectIndex1]; parent.ifdentry.location.href= param2; } if (strDivision[nSelectIndex] == "関東") { param2 = strURLKanto[nSelectIndex1]; parent.ifdentry.location.href= param2; } alert(param2); } function CreateList() { Create(document.frmSample.lstDivision, strDivision); CreateList2(); } //クリア関数 function ClearPref() { //現在のプルダウンＢの個数分削除する for (nDel = document.frmSample.lstPref.options.length -1; nDel >= 0 ; nDel--) { document.frmSample.lstPref.options[nDel] = null; } } function CreateList2() { var nSelectIndex = 0; ClearPref(); nSelectIndex = document.frmSample.lstDivision.value; if (strDivision[nSelectIndex] == "北海道・東北") { Create(document.frmSample.lstPref, strPrefKita); } if (strDivision[nSelectIndex] == "関東") { Create(document.frmSample.lstPref, strPrefKanto); } } //この関数はIEのみです。NNを検討する場合はサンプル4-11をご覧ください。 function Create(objList, objArray) { var nMax = objArray.length; var nLoop = 0; for (nLoop = 0; nLoop < nMax; nLoop++) { var oAdd = document.createElement("OPTION"); oAdd.text = objArray[nLoop]; oAdd.value = nLoop; objList.add(oAdd); } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0" onLoad="CreateList()"> <center> <FORM name="frmSample"><SELECT size="1" name="lstDivision" onChange="CreateList2()"></SELECT> <BR><SELECT size="1" name="lstPref" onChange="SelectPref()"></SELECT> </center> <IFRAME src="test3.htm" width="800" height="100" name="ifdentry" frameborder="1" border="1"></IFRAME> </BODY> </HTML>
その他の回答 (6)
- kokorone
- ベストアンサー率38% (417/1093)
<!-- で始まり、 --> で終わるのは、 コメントで、その間は、HTMLの動作としては、 無意味で、単なるメモです。 saved from url=(0022)http://internet.e-mail は、このファイルが、http://internet.e-mailにて 登録された というような意味です。 ですから、基本的には、このタグの有無で動作が変わる とは、考えられません。 可能性としては、サーバーサイトで、このタグをチェック して、HTMLを無効にしているものと思われます。
お礼
そうですか・・・。ではなにか他の原因がありそうですね。もうすこし調べてみます。 昨日から夜遅くまで親切にいろいろ教えてくださいまして本当にありがとうございました。急いでいたのでとても助かりました。今回の件が落ち着いたら、もう一度基礎から勉強しなおします！
- kokorone
- ベストアンサー率38% (417/1093)
CreateList2()の中で、ClearPref();を 呼ぶ命令と、ClearPref();の関数を追加 すると言いたかったのです。 CreateList2()とClearPref();は、以下の ようにしてください。 ClearPref();は、現在のプルダウン個数 を参照するよう、修正しています。 もう少しです。がんばってください。 function CreateList2() { var nSelectIndex = 0; ClearPref(); nSelectIndex = document.frmSample.lstDivision.value; //とりあえず関東のみ。 if (strDivision[nSelectIndex] == "北海道・東北") { Create(document.frmSample.lstPref, strPrefKita); } if (strDivision[nSelectIndex] == "関東") { Create(document.frmSample.lstPref, strPrefKanto); } } //クリア関数 function ClearPref() { //現在のプルダウンＢの個数分削除する for (nDel = 0; nDel < document.frmSample.lstPref.options.length; nDel++) { document.frmSample.lstPref.remove(0); } }
補足
お返事ありがとうございます。 早速やってみたのですが、やはりうまくいきません。Arrayの部分を下記のように指定し、北海道を選ぶと正しく表示され、関東を選ぶと仙台店以降と関東地区のarrayがすべてリストに表示されてしまいます。 var strDivision = new Array("北海道・東北","関東","北陸・東海・甲信越","近畿・中国・四国","九州・沖縄"); var strPrefKita = new Array("札幌店","北海道営業所","盛岡店","仙台店","山形店","酒田店"); var strURLKita = new Array("sapporo.htm","hokkai.htm","morioka.htm","sendai.htm","yamagata.htm","sakata.htm","a07.html"); var strPrefKanto = new Array("水戸店","高崎店","昭島店","宇都宮店","足利店","相模原店","新宿店","六本木店","大宮店","船橋店"); var strURLKanto = new Array("mito.htm","takasaki.htm","akisima.htm","utunomiya.html","asikaga.htm","sagami.htm","sinjuku.htm","roppongi.htm","oomiya.htm","funa.htm"); 先ほど教えていただいたClearPref()は追加しましたがそれによってfunction Create(objList, objArray)を書き換える必要はないのですよね？ためしにやったのですがエラーになってしまいました。
- kokorone
- ベストアンサー率38% (417/1093)
CreateList2() の var nSelectIndex = 0; の次に、 ClearPref();を追加してください。 ClearPref();は、プルダウンＢを初期化しています。 Create()のループ回数は、 配列の個数分まわりますので、変更は不要です。
補足
ごめんなさい。 こういうことですよね？でもいろいろ試してもうまくいかないのですが・・・。 function CreateList2() { var nSelectIndex = 0; function ClearPref();{ } nSelectIndex = document.frmSample.lstDivision.value; //とりあえず関東のみ。 if (strDivision[nSelectIndex] == "北海道・東北") { Create(document.frmSample.lstPref, strPrefKita); } if (strDivision[nSelectIndex] == "関東") { Create(document.frmSample.lstPref, strPrefKanto); } }
- kokorone
- ベストアンサー率38% (417/1093)
<form>以降に全角の空白が入っています。 半角の空白か、TABを使ってください。
補足
お返事ありがとうございます。空白・・・。そんなことで質問してしまい、すみませんでした。空白を消したところうまく表示されました。ありがとうございます。ですが、関東以外を表示しようと追加してみたところ、表示はされるのですが、二つ目のプルダウンにすべてのstrPrefの項目が表示されてしまいます。単純に「selectpref()」の「param2 = strURLkantou[nSelectIndex1];」をstrURLKitaのように書き換えfunction CreateList2()内にもif (strDivision[nSelectIndex] == "北海道・東北"){ Create(document.frmSample.lstPref, strPrefKita);単純に付け加えています。リストの繰り返しはfunction Create部分を変えないといけないのでしょうか？何度も質問しすみません。よろしくお願いします。
- kokorone
- ベストアンサー率38% (417/1093)
その１： サンプルでは、３つのプルダウンともに、Create()にて、 valueを配列の何番目かという数字を与えています。 その２： 先ほど提示したparam2は、IFRAMEの変更後のURLのつもり でした。 というわけで、サンプルプログラムの改良点をまとめました。 form以下は： <FORM name="frmSample"><SELECT size="1" name="lstDivision" onChange="CreateList2()"></SELECT> <BR><SELECT size="1" name="lstPref" onChange="SelectPref()"></SELECT> </center> <IFRAME src="test3.htm" width="800" height="100" name="ifdentry" frameborder="1" border="1"></IFRAME> </BODY> </HTML> プルダウンB（ここでは、"lstPref"）が変更された時(onChange)に、 呼ばれる"SelectPref()"を追加します。 function SelectPref() { var nSelectIndex1 = 0; var nSelectIndex = 0; var param2; nSelectIndex1 = document.frmSample.lstPref.value; nSelectIndex = document.frmSample.lstDivision.value; //とりあえず関東のみ。 if (strDivision[nSelectIndex] == "関東") { param2 = strURLKanto[nSelectIndex1]; parent.ifdentry.location.href= param2; } } nSelectIndex1には、プルダウンB（ここでは、"lstPref"）の何番目が選択されているか が入っています。 あらかじめ、関東地区の県名に対応したURLのリストを県名と同様に定義します。 var strURLKanto = new Array("a01.html","a02.html","a03.html","a04.html","a05.html","a06.html","a07.html"); param2 = strURLKanto[nSelectIndex1];で該当するURLを抽出します。 parent.ifdentry.location.href= param2;で抽出したURLをIFRAMEに渡します。
補足
詳しくありがとうございます。 なんとなくわかったような気がしたのですが、いざやってみると2つ目のプルダウンが表示されません。いったいどこが違ってるのでしょうか？ CreateList3()とresoltは必要ないので消してあります。何度もすみません。宜しくお願い致します。 <script language="javascript"> <!--// var strDivision = new Array("北海道","東北","北陸","関東","中部","関西","中国","四国","九州","沖縄"); var strPrefKanto = new Array("東京都","神奈川県","千葉県","埼玉県","群馬県","栃木県","茨城県"); var strURLKanto = new Array("a01.html","a02.html","a03.html","a04.html","a05.html","a06.html","a07.html"); function SelectPref() { var nSelectIndex1 = 0; var nSelectIndex = 0; var param2; nSelectIndex1 = document.frmSample.lstPref.value; nSelectIndex = document.frmSample.lstDivision.value; //とりあえず関東のみ。 if (strDivision[nSelectIndex] == "関東") { param2 = strURLKanto[nSelectIndex1]; parent.ifdentry.location.href= param2; } } function CreateList() { Create(document.frmSample.lstDivision, strDivision); CreateList2(); } function CreateList2() { var nSelectIndex = 0; nSelectIndex = document.frmSample.lstDivision.value; //とりあえず関東のみ。 if (strDivision[nSelectIndex] == "関東") { Create(document.frmSample.lstPref, strPrefKanto); } } //この関数はIEのみです。NNを検討する場合はサンプル4-11をご覧ください。 function Create(objList, objArray) { var nMax = objArray.length; var nLoop = 0; for (nLoop = 0; nLoop < nMax; nLoop++) { var oAdd = document.createElement("OPTION"); oAdd.text = objArray[nLoop]; oAdd.value = nLoop; objList.add(oAdd); } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0" onLoad="CreateList()"> <center> <FORM name="frmSample"><SELECT size="1" name="lstDivision" onChange="CreateList2()"></SELECT> <BR><SELECT size="1" name="lstPref" onChange="SelectPref()"></SELECT> </center> <IFRAME src="test3.htm" width="800" height="100" name="ifdentry" frameborder="1" border="1"></IFRAME> </BODY> </HTML>
- kokorone
- ベストアンサー率38% (417/1093)
まず、複数のプルダウンについて 参照ＵＲＬのサンプル４９が参考になると思います。 あとは、プルダウンＢのOnChangeで、 parent.IFRAME名.location.href= param2; で変更できると思います。
補足
早速のご回答ありがとうございます。ＵＲＬ確認しました。参考にはなりましたし、試したのですが、「strPrefkanto」のArrayにvalueで「○○.htm」を割り当てる方法がわからなく、また回答いただきました「プルダウンＢのOnChangeで、 parent.IFRAME名.location.href= param2;」の「param2;」がわかりません。初心者で申し訳ありませんが、また教えてください。宜しくお願いします。
補足
ありがとうございました！念のため他の地域のarrayも作成し試したところ、きれいに表示されました。本当にありがとうございます！ 最後にお聞きしたいのですが、iframe に表示させるhtmlをサンプルで用意したところ、 <html>の前に<!-- saved from url=(0022)http://internet.e-mail -->と記入されているファイルのみiframe領域に表示され、他のhtmlは単独で見る事はできるもののiframe領域には表示されません。<!-- saved from url=(0022)http://internet.e-mail -->とはなんでしょうか？もしお分かりでしたら教えて頂きたいのですが・・・。