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

【JavaScript】下記URLのように、プルダウンの連動メニューを作っています。

1つめのメニューの「A02」を選択した時の3つめのメニュー(Cのメニュー)に値を設定("A02_B01_C01"〜にしたい)するには、
どのようなソース(変数)を加えればよいのでしょうか?


http://www.geocities.jp/kentajoyweb/pulldown.html



●質問者: kentajoy
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript URL ソース 変数
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Yota
●30ポイント

いまひとつ質問の意図がわからないのですが、とりあえず書いてみます。

javascriptの一番最後に追加。

var data12 = new Array(

"C",

"A02_B02_C01",

"A02_B02_C02" );

var url12 = new Array(

"",

"リンク",

"リンク"

);

html修正。

<select id="sel0" name="sel0" onChange="SetList('sel1', eval('data' + this.selectedIndex), eval('url' + this.selectedIndex));SetList('sel2', eval('data1' + this.selectedIndex), eval('url1' + this.selectedIndex))">
◎質問者からの返答

ややこしくてすいません。

ご回答いただいたソースは違うみたいです。


現状、A02を選んだときは、一番左のCのメニューはBと連動しません。(値は出ますが、A01を選んだときの値が出てます。)


var data12はすでに A01_B02_C01 のメニューに当てています。

例えば var data21 等を新たに指定して、A02_B01_C01 のメニューに当てて、それを連動させたいです。


2 ● Yota
●30ポイント ベストアンサー

B→Cの連携のことでしょうかね。これではどうですか。

var data21 = new Array(

"C",

"A02_B01_C01",

"A02_B01_C02"

);

var url21 = new Array(

"",

"リンク",

"リンク"

);

var data22 = new Array(

"C",

"A02_B02_C01",

"A02_B02_C02" );

var url22 = new Array(

"",

"リンク",

"リンク"

);

html修正。

<select id="sel1" name="sel1" onChange="SetList('sel2', eval('data'+document.getElementById('sel0').selectedIndex + this.selectedIndex), eval('url'+document.getElementById('sel0').selectedIndex + this.selectedIndex))">

◎質問者からの返答

有り難うございます。

無事動きました!


3 ● aside
●20ポイント

こうですか?わかりません><

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript">
<!--
var data = new Array(
 "A",
 "A01",
 "A02"
 );
var data0 = new Array("----");
var url0 = new Array("");
<!-- A01のB -->
var data1 = new Array(
 "B",
 "A01_B01",
 "A01_B02"
 );
var url1 = new Array(
 "", 
 "リンク", 
 "リンク"
 );
<!-- A02のB -->
var data2 = new Array(
 "B",
 "A02_B01",
 "A02_B02"
 );
var url2 = new Array(
 "", 
 "リンク", 
 "リンク"
 );
<!-- A01のB01のC -->
var data11 = new Array( 
 "C", 
 "A01_B01_C01", 
 "A01_B01_C02" 
 ); 
var url11 = new Array( 
 "", 
 "リンク", 
 "リンク"
 ); 
<!-- A01のB02のC -->
var data12 = new Array( 
 "C", 
 "A01_B02_C01", 
 "A01_B02_C02" ); 
var url12 = new Array( 
 "", 
 "リンク", 
 "リンク"
 );
<!-- A02のB01のC -->
var data21 = new Array( 
 "C", 
 "A02_B01_C01", 
 "A02_B01_C02" 
 ); 
var url21 = new Array( 
 "", 
 "リンク", 
 "リンク"
 ); 
<!-- A02のB02のC -->
var data22 = new Array( 
 "C", 
 "A02_B02_C01", 
 "A02_B02_C02" ); 
var url22 = new Array( 
 "", 
 "リンク", 
 "リンク"
 );
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);">
<form onSubmit="return false;" action="">
 <table border="0" cellpadding="10" cellspacing="10">
 <tr>
 <td>
 <select id="sel0" name="sel0" onChange="SetList('sel1', eval('data' + this.selectedIndex), eval('url' + this.selectedIndex));SetList('sel2', eval('data' + this.selectedIndex + '1'), eval('url' + this.selectedIndex + '1'))">
 <option>A</option>
 </select>
 </td>
 <td>
 <select id="sel1" name="sel1" onChange="SetList('sel2', eval('data1' + this.selectedIndex), eval('url1' + this.selectedIndex))">
 <option>---</option>
 </select>
 </td>
 <td>
 <select id="sel2" name="sel2">
 <option>---</option>
 </select>
 </td>
 </tr>
 </table>
</form>
</body>
</html>
◎質問者からの返答

有り難うございます。

参考にさせていただきます。

関連質問


●質問をもっと探す●



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