JavaScriptで２つコンボの連動セレクトメニューを作りたいのですが、

Question

kentajoy

97

93もっと見る

70pt

インターネットウェブ制作

JavaScriptで２つコンボの連動セレクトメニューを作りたいのですが、

下記URLを参考にしようと思っております。
http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html

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

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

回答の条件

1人5回まで

登録：2007/05/20 21:05:48
終了：2007/05/20 23:46:05

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

susie-t99182007/05/20 22:04:21

35pt

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

<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はどこに指定すればよいのでしょうか？

2007/05/20 22:31:22

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

susie-t · Accepted Answer · 2007-05-20T23:21:23+09:00

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

<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が選択されていない場合に遷移しないようにしました。

susie-t · Accepted Answer · 2007-05-20T23:21:23+09:00

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

<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が選択されていない場合に遷移しないようにしました。

JavaScriptで２つコンボの連動セレクトメニューを作りたいのですが、

ベストアンサー

susie-t99182007/05/20 23:21:23

その他の回答（1件）

susie-t99182007/05/20 22:04:21

susie-t99182007/05/20 23:21:23ここでベストアンサー

コメント（0件)

この質問への反応（ブックマークコメント）