プロが教える店舗＆オフィスのセキュリティ対策術

プルダウンを複数使い、ページ内にHTMLを表示させる店舗検索画面

解決済

  • 質問者：2pola4
  • 質問日時：
  • 回答数：7件

初心者です。何日もいろいろ試したのですが、上手くいきません。教えてください。まず一つ目のプルダウンでは東北地区、北海道など地域が選べ、二つ目のプルダウンでは選んだ地区に対応する店舗名が表示され、店舗をクリックすると、画面下部中央に設定してあるiframe領域に、店舗紹介のhtmlが表示されるようにしたいのです。
プルダウンが二つでそのあと別ウィンドウが開くページはよくあるのですが、別ウィンドウではなく、同じページにプルダウン領域は表示させたまま、店舗紹介のページを載せたいのです。現状スクリプトは長くて載せられませんがfunction Jump() {
tu = document.f.elements['A'].options[document.f.elements['A'].selectedIndex].value
if( tu != '-' ) {
window.hoge.location.href = tu;
}このような関数をjumpa()、jumpb()などと複数つくり、aやbのselectにonchangeで割り当てているといった感じです。宜しくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.6ベストアンサー

  • 回答者： kokorone
  • 回答日時：

申し訳ありませんでした。


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>

この回答への補足

ありがとうございました！念のため他の地域のarrayも作成し試したところ、きれいに表示されました。本当にありがとうございます！
最後にお聞きしたいのですが、iframe
に表示させるhtmlをサンプルで用意したところ、
<html>の前に<!-- saved from url=(0022)http://internet.e-mail -->と記入されているファイルのみiframe領域に表示され、他のhtmlは単独で見る事はできるもののiframe領域には表示されません。<!-- saved from url=(0022)http://internet.e-mail -->とはなんでしょうか？もしお分かりでしたら教えて頂きたいのですが・・・。

補足日時：2005/05/31 11:29
通報する
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： kokorone
  • 回答日時：

<!-- で始まり、　-->　で終わるのは、


コメントで、その間は、HTMLの動作としては、
無意味で、単なるメモです。
saved from url=(0022)http://internet.e-mail
は、このファイルが、http://internet.e-mailにて
登録された　というような意味です。
ですから、基本的には、このタグの有無で動作が変わる
とは、考えられません。
可能性としては、サーバーサイトで、このタグをチェック
して、HTMLを無効にしているものと思われます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

そうですか・・・。ではなにか他の原因がありそうですね。もうすこし調べてみます。

昨日から夜遅くまで親切にいろいろ教えてくださいまして本当にありがとうございました。急いでいたのでとても助かりました。今回の件が落ち着いたら、もう一度基礎から勉強しなおします！

通報する
お礼日時：2005/05/31 12:56

No.5

  • 回答者： kokorone
  • 回答日時：

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)を書き換える必要はないのですよね？ためしにやったのですがエラーになってしまいました。

補足日時：2005/05/31 01:22
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： kokorone
  • 回答日時：

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);
}
}

補足日時：2005/05/31 00:13
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： kokorone
  • 回答日時：

<form>以降に全角の空白が入っています。


半角の空白か、TABを使ってください。

この回答への補足

お返事ありがとうございます。空白・・・。そんなことで質問してしまい、すみませんでした。空白を消したところうまく表示されました。ありがとうございます。ですが、関東以外を表示しようと追加してみたところ、表示はされるのですが、二つ目のプルダウンにすべてのstrPrefの項目が表示されてしまいます。単純に「selectpref()」の「param2 = strURLkantou[nSelectIndex1];」をstrURLKitaのように書き換えfunction CreateList2()内にもif (strDivision[nSelectIndex] == "北海道・東北"){Create(document.frmSample.lstPref, strPrefKita);単純に付け加えています。リストの繰り返しはfunction Create部分を変えないといけないのでしょうか？何度も質問しすみません。よろしくお願いします。

補足日時：2005/05/30 21:53
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： kokorone
  • 回答日時：

その１：


　サンプルでは、３つのプルダウンともに、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>

補足日時：2005/05/30 17:02
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： kokorone
  • 回答日時：

まず、複数のプルダウンについて


参照ＵＲＬのサンプル４９が参考になると思います。

あとは、プルダウンＢのOnChangeで、
parent.IFRAME名.location.href= param2;

で変更できると思います。

参考URL：http://www.usagi-js.com/sample/jssample5.htm

この回答への補足

早速のご回答ありがとうございます。ＵＲＬ確認しました。参考にはなりましたし、試したのですが、「strPrefkanto」のArrayにvalueで「○○.htm」を割り当てる方法がわからなく、また回答いただきました「プルダウンＢのOnChangeで、
parent.IFRAME名.location.href= param2;」の「param2;」がわかりません。初心者で申し訳ありませんが、また教えてください。宜しくお願いします。

補足日時：2005/05/30 14:51
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報