ドロップダウンリストの値の足し合わせ（子ども向け）

質問

お世話になります。はじめて質問させて頂きます。
このたび、ドロップダウンリストを用いて、子どもでもホームページ（データベース）にアクセスできるユーザインターフェースを作りたいと考えております。具体的には、階層化されたデータベースにドロップダウンリストで項目を選ぶことによりURLアドレスを作り出し、[Go]ボタンでアクセスできるようにしたいと考えています。
（例）データーベース
http://www.aa.bb.jp/（学年）／（クラス）／（データファイル）
（学年ディレクトリ）1nen,2nen,3nen,・・・
（クラスディレクトリ）1kumi,2kumi,3kumi,・・・
（データディレクトリ）a.jpg,b.jpg,3.jpg,・・・
といった階層化されているものがあったとき、ドロップダウンリストを
[学年]
　１年
　２年
　３年
[クラス]
　１組
　２組
[データ]
　１
　２
　３
と作り、学年ドロップダウンリストで、
（例）http://www.aa.bb.jp/1nen
まで作り出し、クラスドロップダウンリストで、　
（例）http://www.aa.bb.jp/1nen/2kumi
まで作り出し、最後のデータドロップダウンリストで、
（例）http://www.aa.bb.jp/1nen/2kumi/3.jpg
までのアドレスが完成し、[Go]ボタンでHPを表示させるようなものです。なお、アドレス生成の途中過程は表示の必要はありません。
http://www.aa.bb.jp/の部分は前置文字列で共通部分です。

わかりにくい説明かとは思いますが、ご教示頂ければ幸いです。
よろしくお願い致します。

回答No.1

noname#36864 · ベストアンサー

HTMLとJavaScriptの話ですかね？
それなら
<form action="http://www.aa.bb.jp/">
[学年]<select>
<option value="1nen">1年</option>
<option value="2nen">2年</option>
<option value="3nen">3年</option>
</select>
[クラス]<select>
<option value="1kumi">1組</option>
<option value="2kumi">2組</option>
<option value="3kumi">3組</option>
</select>
[データ]<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="[Go]">
</form>
このようなフォームをbody内に作り
<script type="text/javascript">
window.onload = function(){
document.forms[0].elements[3].onsubmit = function(){
var e = document.forms[0].elements;
for(var i=0;i<e.length;i++){
var url = document.forms[0].action;
if(e[i].type != "submit"&&i != 2){
url += e[i].value + "/";
}else if(e[i].type != "submit"&&i == 2){
url += e[i].value;
}
window.location = url;
}
}
</script>
このようなJavaScriptをhead内に入れれば良いじゃないかと思います。
動作未確認。

何をやろうとしているかはDOMやDOMのプロパティを調べてください。
検索すれば沢山情報は得られます。

JavaScriptに付いてはこちらで調べられます。
http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference

お礼

kk273g906様
　こんばんは。早々にお返事有り難う御座います。
javascriptを初めて勉強しますので、とても困惑しています。
kk273g906様にお示し頂いたsampleを早々に試してみようと思います。
当然の様にjavascriptの部分が複雑ですので、様々なfaq等を見ながら、
読み解いて行こうと思います。
今日、下にありますようなscriptを作ってみました。
見かけ上は、目的のごとく、ドロップダウンリストでURLを作り出して行くのですが、最後にできあがるURLの一部と前置文字列（http://www.aa.bb.jp/）を足し合わせることができません。
これでは全く見当外れになってしまっているでしょうか。

<script language="javascript">
<!--
function fun_set(set_name){
txtArea.value += eval(set_name).value;
}
//-->
</script>
<SELECT name="gakunen" size="1" onChange="javascript:fun_set(gakunen);">
<OPTION value="1nen/" >１年</OPTION>
<OPTION value="2nen/">２年</OPTION>
<OPTION value="3nen/">３年</OPTION>
</SELECT>

<SELECT name="kumi" size="1" onChange="javascript:fun_set(kumi);">
<OPTION value="1kumi/">１組</OPTION>
<OPTION value="2kumi/">２組</OPTION>
<OPTION value="3kumi/">３組</OPTION>
</SELECT>
<SELECT name="data" size="1" onChange="javascript:fun_set(data);">
<option value="a.jpg">a</option>
<option value="b.jpg">b</option>
<option value="c.jpg">c</option>
</SELECT>
<BR>
<TEXTAREA name="txtArea" rows="5" cols="50">

補足

kk273g906様
お世話になります。今日も色々試しましたところ、
select文で得られた値をURLとして足し合わせることで目的が達成できました。ありがとうございました。
これからもよろしくお願いいたします。
概略は下記のようなものです。
<form name="form">
<font color="#ff0080" size="5">gakunen：</font> </font>
Introductory_remarks = "http://wwwaa.bb..jp/"

<select name="gakunen">
<option value="01">１年</option>
<option value="02">２年</option>
<option value="03">３年</option>
</select>

<font color="#ff0080" size="5">classs：</font> </font>
<select name="Hiniti">
<option value="01">１組</option>
<option value="02">２組</option>
<option value="03">３組</option>
</select>

<font color="#ff0080" size="5">dat：</font> </font>
<select name="Hiniti">
<option value="a.jpg">１</option>
<option value="b.jpg">２</option>
<option value="c.jpg">３</option>
</select>

<script language="javascript">
<!--

gakunenDir = document.form.gakunen.value;
classDir = document.form.class.value;
datDir = document.form.dat.value;

URL = document.form.Introductory_remarks.value + "/" + gakunenDir + "/" + classDir + "/"+ datDir ;

//-->
</script>