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

下記のような2階層のプルダウンメニューをCGIページ内に記述したいのですが?
よい方法を教えていただければ幸いです。
<script language="JavaScript" type="text/javascript">
<!--
var data = new Array("グループ名を選択","グループA","グループB");
var data0 = new Array("---");
var data1 = new Array("お名前を選択","テスト01","テスト02","テスト03");
var data2 = new Array("お名前を選択","テストA","テストB","テストC");

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>
<div>
<form>
<select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel1', eval('data' + this.selectedIndex))">
<option>---</option>
</select>
<br>
<br>
<span class="style2">お名前</span><br>
<select id="sel1" name="sel1" style="width:160px;" onChange="alert(this.options[this.options.selectedIndex].value);">
<option>---</option>
</select>

</form>
</div>
</p>

●質問者: kaji0245
●カテゴリ:インターネット ウェブ制作
✍キーワード:href グループ テスト 名前 記述
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● かずぼっくり
●60ポイント

CGIによっても異なりますが、Perlのスクリプトなら

print <<EOM;</p>

<script language="JavaScript" type="text/javascript"></p> <p><!--</p> <p>var data = new Array("グループ名を選択","グループA","グループB");</p> <p>var data0 = new Array("---");</p> <p>var data1 = new Array("お名前を選択","テスト01","テスト02","テスト03");</p> <p>var data2 = new Array("お名前を選択","テストA","テストB","テストC");</p> <p>function SetList(objid, arr){</p> <p>var obj = document.getElementById(objid);</p> <p>for(i=obj.length; i>=0; i--){ obj.options[i] = null; }</p> <p>for(i=0; i<arr.length; i++){</p> <p>obj.options[i] = new Option(arr[i]);</p> <p>obj.options[i].value = arr[i];</p> <p>}</p> <p>}</p> <p>function goToPage(){</p> <p>var obj = document.getElementById("sel1");</p> <p>location.href = obj.value;</p> <p>}</p> <p>//--></p> <p></script>

<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>

</form>

EOM

というように、print <<EOM;とEOMで包んでやれば大丈夫だと思います。</p>

http://www.tohoho-web.com/wwwperl1.htm#EOF

◎質問者からの返答

ご回答ありがとうございます、参考にさせていただきます。

関連質問


●質問をもっと探す●



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