下記のような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>

回答の条件
  • URL必須
  • 1人5回まで
  • 登録:2007/07/07 17:29:28
  • 終了:2007/07/07 23:48:23

回答(1件)

id:kazubokkuri No.1

かずぼっくり回答回数92ベストアンサー獲得回数82007/07/07 18:14:04

ポイント60pt

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

id:kaji0245

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

2007/07/07 23:48:02
  • id:kazubokkuri
    かずぼっくり 2007/07/08 10:59:12
    訂正
    print <<EOM;</p>
    となっていますが、正しくは
    print <<EOM;
    です。
    僕は「</p>」を書いていないので、はてなのシステムがなんらかの問題で付加してしまったものと思います。

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません