人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptで2つコンボの連動セレクトメニューを作りたいのですが、
下記URLを参考にしようと思っております。
http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html

これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、
各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、
方法が分かりません。

参考になるサイト、アドバイス等宜しくお願いいたします。



●質問者: kentajoy
●カテゴリ:インターネット ウェブ制作
✍キーワード:Go JavaScript URL アドバイス コンボ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● susie-t
●35ポイント

以下のようにすればできます。

<html lang="ja">
<head>

<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var data = new Array("Q1","A","B");
var data0 = new Array("---");
var data1 = new Array("Q2","http://www.hatena.ne.jp/","http://q.hatena.ne.jp/","http://map.hatena.ne.jp/");
var data2 = new Array("Q2","","http://i.hatena.ne.jp/","http://g.hatena.ne.jp/","http://graph.hatena.ne.jp/");

function SetList(objid, arr){
 var obj = document.getElementById(objid);
 for(i=obj.length; i>=0; i--){ obj.options[i] = null; }
 for(i=0; i<arr.length; i++){
 obj.options[i] = new Option(arr[i]);
 obj.options[i].value = arr[i];
 }
}

function goToPage(){
 var obj = document.getElementById("sel1");
 location.href = obj.value;
}

//-->
</script>
</head>
<body onLoad="SetList('sel0', data);">

<div>
 <form>
 <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel1', eval('data' + this.selectedIndex))">
 <option>---</option>
 </select>
 <select id="sel1" name="sel1" style="width:160px;" onChange="alert(this.options[this.options.selectedIndex].value);">
 <option>---</option>
 </select>
 <button onclick="goToPage();">GO</button>
 </form>
</div>

</body>
</html> 

location.hrefにURLを設定するとそのページへ遷移します。セレクトボックスの値は、document.getElementById等でセレクトボックスのオブジェクトを取得して、obj.valueで取得できます。

参考になれば幸いです。

◎質問者からの返答

有り難うございます!

いただいたソースの、var data の部分なのですが、

var data = new Array("選択してください","A","B");

var data0 = new Array("---");

var data1 = new Array("Aの子メニュー","Yahoo! JAPAN","はてな");

var data2 = new Array("Bの子メニュー","Google","はてなブックマーク");

とした場合、それぞれのサイトのURLはどこに指定すればよいのでしょうか?


2 ● susie-t
●35ポイント ベストアンサー

そのためには元のコードを少し変える必要があります。以下のようにします。元のコードをなるべく使うようにしています。そのため、少しややこしくなっていますが・・・。

<html lang="ja">
<head>

<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var data = new Array("選択してください","A","B");

var data0 = new Array("---");
var url0 = new Array("");

var data1 = new Array("Aの子メニュー","Yahoo! JAPAN","はてな");
var url1 = new Array("", "http://www.yahoo.co.jp/", "http://www.hatena.ne.jp/");

var data2 = new Array("Bの子メニュー","Google","はてなブックマーク");
var url2 = new Array("", "http://www.google.co.jp/", "http://q.hatena.ne.jp/");

function SetList(objid, arr, url){
 var obj = document.getElementById(objid);
 for(i=obj.length; i>=0; i--){ obj.options[i] = null; }
 for(i=0; i<arr.length; i++){
 obj.options[i] = new Option(arr[i]);
 if(url == null){
 obj.options[i].value = arr[i];
 }else{
 obj.options[i].value = url[i];
 }
 }
}

function goToPage(){
 var obj = document.getElementById("sel1");
 if(obj.value == "") return;
 location.href = obj.value;
}

//-->
</script>
</head>
<body onLoad="SetList('sel0', data);">

<div>
 <form onsubmit="return false;">
 <select id="sel0" name="sel0" style="width:160px;"
 onChange="SetList('sel1', eval('data' + this.selectedIndex),
 eval('url' + this.selectedIndex))">
 <option>---</option>
 </select>
 <select id="sel1" name="sel1" style="width:160px;"
 onChange="alert(this.options[this.options.selectedIndex].value);">
 <option>---</option>
 </select>
 <button onclick="goToPage();">GO</button>
 </form>
</div>

</body>
</html>

ある条件下でclick時に意図しないsubmitが発生する場合があるので、formのonsubmitでreturn falseしています。また、URLが選択されていない場合に遷移しないようにしました。

◎質問者からの返答

有り難うございます。とても助かりました。

いただいたソースを元に勉強させていただきます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ