- ベストアンサー
プルダウンを使った店舗検索画面の作成方法
- プルダウンを使った店舗検索画面を作成する方法について教えてください。
- 初心者ですが、上手くいかないので助けが必要です。
- プルダウンで地区を選び、店舗をクリックすると設定した領域に店舗紹介のhtmlを表示させたいです。
- 2pola4
- お礼率63% (33/52)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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;」がわかりません。初心者で申し訳ありませんが、また教えてください。宜しくお願いします。
関連するQ&A
- プルダウンで選択したページから戻った時
どなたか教えてください。 プルダウンで選択したページにリンクして、そのページから戻ってきた場合、 プルダウンメニューは選択した項目ではなく、一番上に来る項目が選択されているようにしたいのです。 例：--メニュー-- テスト1ページへ テスト2ページへ ↓をやったら、うまくいったのですがステータスバーに「1」と表示されてしまいました。 <script language="JavaScript"> <!--// function gotosite(site) { if (site != "") { self.location=site } } function init() { status = document.jump.length; for (i=0; i<document.jump.length; i++) document.jump.elements[i].selectedIndex=0; } //--> </script> ちなみにselectのところはこのように書きました。 <form method="POST" name="jump"> <select name="jump" onChange="gotosite(this.options [this.selectedIndex].value)"> よろしくお願いします。どうしても「1」を出したくないんです。 やっぱり無理なんでしょうか？
- ベストアンサー
- JavaScript
- プルダウンメニューのターゲット指定
タイトルどおりなのですが、プルダウンメニュー のリンク先を同ページ内のiframeにしたいのですが これはどうすればできるのでしょうか？ こちらに現在の状況を載せておきます。 <SCRIPT LANGUAGE="JavaScript"><!-- function Jump() { tu = document.f.elements['jumpto'].options[document.f.elements['jumpto'].selectedIndex].value if( tu != '-' ) { location.href = tu; } else { alert('移動先を選択して下さい。'); } } // --></SCRIPT> <FORM NAME="f"> <SELECT NAME="jumpto" onChange="Jump();">> <OPTION VALUE="-" SELECTED>移動先を選択</OPTION> <OPTION VALUE="menu1.htm" target="menu">Page1</OPTION> <OPTION VALUE="menu2.htm" target="menu">Page2</OPTION> </SELECT> </FORM> よろしくお願い致します。
- ベストアンサー
- JavaScript
- 同一ページに複数のプルダウンメニュー
同一ページに複数のプルダウンメニューをつけたいのですが、 どうすればよいのでしょうか。 下記のように1つはつけることができたのですが、 2つめから、どこをどう変えて追加すればよいのかわかりません。 <script language="javascript"> <!-- function A_Li(){ Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> よろしくお願いします。
- ベストアンサー
- JavaScript
- 複数プルダウンでメニューを初期表示に戻したい
No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。 教えていただいたスクリプトは <script language="javascript"> <!-- function A_Li() { Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} function B_Li() { Sel=document.Link1.OP2.selectedIndex; Ms=document.Link1.OP2.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="aaa.htm" SELECTED>ページを選んでください <option value="bbb.htm">ぺージ1</option> <OPTION Value="ccc.htm">ページ2 <OPTION Value="ddd.htm">ページ3 </SELECT> です。 例えば OP2のメニューをクリックしたあと OP3のメニューをクリックしたときにOP2のメニューが初期の 表示メニューに戻したいのですが、どう変えればよいでしょうか。 初心者なので本を見てみたのですがわかりませんでした。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 複数のプルダウンメニューの表示について
複数のプルダウンメニューについてですが、 以前、こちらで教えてもらったことを応用したいのです。 フォーームの中の「グループ1」と「グループ2」という大分類は文字の表示だけでリンクしないようにしたいのです。 この状態だと、「グループ1」という名前もプルダウンの中に入ってしまって、 ファイルがないので、リンクエラーの警告がでます。 どこが間違っていて、 どのように変えたらいいのでしょうか。 よろしくお願い致します。 <script language="javascript"> <!-- var s; function reSel(c) { if(s&&(s!=c)) s.options[0].selected=true; s=c; } function A_Li() { Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms; reSel(document.Link1.OP); } function B_Li() { Sel=document.Link1.OP2.selectedIndex; Ms=document.Link1.OP2.options[Sel].value; parent.main.location.href=Ms; reSel(document.Link1.OP2); } // --> </script> ---------------HTML------------ <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="-" SELECTED>グールプ1</option> <option value="1.htm">あ</option> <OPTION Value="2.htm">い</option> <OPTION Value="3.htm">う</option> <OPTION Value="4.htm">え</option> <OPTION Value="5.htm">お</option> </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="-" SELECTED>グールプ2</option> <option value="6.htm">か</option> <OPTION Value="7.htm">き </option> <OPTION Value="8.htm">く </option> </SELECT>
- ベストアンサー
- JavaScript
- PHP プルダウンメニュー MYSQL
PHPを習い始めているのですがどうしても分からない問題が出てきました。 プルダウンメニューを作成し、その中の項目を選択すると検索ボタンをお押さずに別のページにとび、選択項目の必要情報（全件情報）をページが切り替わったと同時にMYSQLから吐き出したいのですが、どうしてもやり方が分かりません。 色々と調べていたらjavascriptを使い検索ボタンを押さずに、 プルダウンから項目を選んだだけでページは切り替わることは出来たのですが、その次の工程にしているページが切り替わったと同時に選択項目の 必要情報を画面に出力する方法が分かりません、、 下にあるスクリプトでプルダウンから直接違うページに飛ばしており、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <SCRIPT LANGUAGE="JavaScript"><!-- function Jump() { tu = document.f.elements['jumpto'].options[document.f.elements['jumpto'].selectedIndex].value if( tu != '-' ) { location.href = tu; } else { alert('移動先を選択して下さい。'); } } // --></SCRIPT> <FORM NAME="f"> <SELECT NAME="jumpto" onChange="Jump();"> <OPTION VALUE="-" SELECTED>移動先を選択</OPTION> <option value="page1.php" >aaa</option> <option value="page2.php" >bbb</option> <option value="page3.php">ccc</option> <option value="page.php">ddd</option> </SELECT> </FORM> 例えばpage1.phpに飛んで、ページが切り替わったと同時に 全件情報を出力したいのですが どのたかお分かりになるかたが いましたら是非お伺い出来ませんでしょうか？ 宜しくお願い致します。
- ベストアンサー
- PHP
- ページ左にプルダウンメニューをつけたいです。
ページ左にプルダウンメニューをつけたいです。 ページ数がとても多く、目次だけですごい量になってしまうので、 何とか苦なく見られるようにプルダウン式にできればと思っています たとえば、下記のように普段表示されていて、 Ａについて Ｂについて Ｃについて 「Ａについて」をクリックすると下記のようにＡの中の 各ページへのリンクが現れるようにしたいです。 Ａについて ・あいうえお ・かきくけこ ・さしすせそ Ｂについて Ｃについて こういったプログラムを紹介してくれているページがあれば 教えていただけますでしょうか。 よろしくお願いいたします！
- ベストアンサー
- その他（インターネット・Webサービス）
- 複数のプルダウン
いつも参考にしております。 プルダウンが選択後、もうひとつのプルダウンを表示したいと 思っておりますが、うまく表示されません。 1つめのプルダウンの選択によって、2つめのプルダウンのメニューは 異なります。 <!-- function setArea(n) { prefItem = [["▼選択してください"], ["▼選択してください", "千葉県", "東京都", "神奈川県", "山梨県"], ["▼選択してください", "新潟県", "長野県", "富山県"], ["▼選択してください", "静岡県", "愛知県", "岐阜県", "三重県"], len = document.form1.PrefID.options.length; for (i=0; i<len; i++) { document.form1.PrefID.options[i] = null; } document.form1.PrefID.style.visibility = "visible"; for (i=0; i<prefItem[n].length; i++) { document.form1.PrefID.options[i] = new Option(prefItem[n][i]); } } //--> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" style="visibility:hidden"> たとえば、1つめのプルダウンを「関東」を選択すると 2つめのプルダウンに「千葉県, 東京都, 神奈川県, 山梨県」 と表示されますが、その後「▼選択してください」を選択すると 「▼選択してください, 神奈川県」と2つのメニューが表示されてしまいます。 メニューを削除して、新しく生成しています。 なので、「▼選択してください」と1つだけのメニューになるはずだと思うのですが。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- 複数のプルダウンメニューの作り方。
質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・Aリスト、Bリスト、Cリスト…とプルダウンメニュー（メニューを選ぶとアンカー先に飛ぶようにしたい）を複数含んだフォームを一つのhtmlに作ったのですが、動作しません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 list.html <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="list.html#a001">A001</option> <option value="list.html#a002">A002</option> <option value="list.html#a003">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="list.html#b001">A001</option> <option value="list.html#b002">A002</option> <option value="list.html#b003">A003</option> </select> </form> <a id="a001" name="a001"></a>A001<br> <a id="a001" name="a002"></a>A002<br> <a id="a001" name="a003"></a>A003<br> <a id="a001" name="b001"></a>B001<br> <a id="a001" name="b002"></a>B002<br> <a id="a001" name="b003"></a>B003<br> あと、このように同じhtml内でのリンクになる場合は、optionのvalueのlist.htmlを省いてもいいのでしょうか？ 当方、Javascriptに関してはコピペでしか使えない程度の知識の人間です。 ご指南の程宜しくお願いします。
- ベストアンサー
- JavaScript
- プルダウンから飛んだページを別ウインドウで開く方法
初歩的なJavaScriptで申し訳ないのですが、ご教授願いします。 下記のプルダウンのJavaScriptで、例えばヤフーと言う部分を選択し、飛ぶをクリックするとヤフーに飛びますが、その際ヤフーにとんだページを別ウインドウで表示させたいのですが、お分かりの方いらっしゃいましたらこの素人に教えてください・・ <HTML> <HEAD> <script language="javascript"> <!-- function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } //--> </script> </HEAD> <BODY> <form method=post> <select name="navi" size="10" "abc" onChange="document.b.submit()"> <option value="http://www.yahoo.co.jp/">ヤフー </select> <input type=button value="飛ぶ" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
補足
ありがとうございました！念のため他の地域のarrayも作成し試したところ、きれいに表示されました。本当にありがとうございます！ 最後にお聞きしたいのですが、iframe に表示させるhtmlをサンプルで用意したところ、 <html>の前に<!-- saved from url=(0022)http://internet.e-mail -->と記入されているファイルのみiframe領域に表示され、他のhtmlは単独で見る事はできるもののiframe領域には表示されません。<!-- saved from url=(0022)http://internet.e-mail -->とはなんでしょうか？もしお分かりでしたら教えて頂きたいのですが・・・。