セレクトメニューでもう一つのセレクトメニューを切り替え移動

セレクトメニューでもう一つのセレクトメニューを切り替え移動させる

2段階選択です。

１ページには１ページ２ページは２ページときちんと切り替わります。

サンプル

<html>
<head>
<script type="text/javascript">
/*日本語は好きに変えて下さい。
*/

function open_select_file(){
if(document.select1_menu.select2_menu.value != ''){
open_file = './select/' + document.select1_menu.select2_menu.value + '.htm';
window.open(open_file,'SELECT_CONTENT');
}
else{
alert('行きたいページを選択してください。');
}
}
function make_event_select1_menu(){
number_index = document.select1_menu.select_number.selectedIndex;
number = document.select1_menu.select_number.options(number_index).value;
if(number == ''){
document.select1_menu.select2_menu.length = 1;
document.select1_menu.select2_menu.options[0].value = '';
document.select1_menu.select2_menu.options[0].text = '「行きたいページ」を選択してください';
}
else if(number == '1'){
document.select1_menu.select2_menu.length = 4;

document.select1_menu.select2_menu.options[0].value = '';
document.select1_menu.select2_menu.options[1].value = '1_1';
document.select1_menu.select2_menu.options[2].value = '1_2';
document.select1_menu.select2_menu.options[3].value = '1_3';

document.select1_menu.select2_menu.options[0].text = '「行きたいページ」を選択してください';
document.select1_menu.select2_menu.options[1].text = '１の１ページ目';
document.select1_menu.select2_menu.options[2].text = '１の２ページ目';
document.select1_menu.select2_menu.options[3].text = '１の３ページ目';
}
else if(number == '2'){
document.select1_menu.select2_menu.length = 4;

document.select1_menu.select2_menu.options[0].value = '';
document.select1_menu.select2_menu.options[1].value = '2_1';
document.select1_menu.select2_menu.options[2].value = '2_2';
document.select1_menu.select2_menu.options[3].value = '2_3';

document.select1_menu.select2_menu.options[0].text = '「行きたいページ」を選択してください';
document.select1_menu.select2_menu.options[1].text = '２の１ページ目';
document.select1_menu.select2_menu.options[2].text = '２の２ページ目';
document.select1_menu.select2_menu.options[3].text = '２の３ページ目';
}
}
</script>
</head>
<body onload="make_event_select1_menu()">
<FORM name="select1_menu" action="#">
<SELECT name="select_number" onchange="make_event_select1_menu()">
<option value="" selected>－ページを選択して下さい。
<option value="1">１ページ目
<option value="2">２ページ目

</SELECT> の <SELECT name="select2_menu">
</SELECT>
行きたいページを選んでください
<TABLE>
<TBODY>
<TR>
<TD align="right">

<button onclick="javascript:open_select_file()">ジャンプ</button>
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</body>
</html>

「./select/」で行き先を指示しています。
このサンプル場合同じディレクトリーの中のselectというディレクトリーの中にあるファイルと指定しています。
もし同じディレクトリーの中のファイルをしていするなら「./select/」の部分を
「./」に書き換えてください。
絶対パス・相対パスを参考にしてみて下さい。

document.select1_menu.select2_menu.options[1].value = '1_1';で１の１を選択したときに
行くファイル名を指しています。つまり1_1htmになります。
それぞれ1_1、1_2、1_3、2_1、2_2、2_3.htmに行くようにしてあります。htm指定を変えたければ
６行目の「htm」を「html」等に変更すれば問題ありません。
このサンプルでは選択していなければアラートが出るようになっていますが
これをのけたければ
else{
alert('行きたいページを選択してください。');
}
９行目からの上記の部分を削除してください。でも削除すると
訪問者は選択していなくてボタンを押したときになんで行かないの？と
思うかもしれません。

またセレクトの数を変えたければ
それぞれ同じ書き方になっていますので増やすことも減らすこともできますので
チャレンジしてみてください。
その時にはmenu.length = 4;の数字を変更しただけ増減してください。

こちらですぐにテストできます。

ソースを利用したら、http://www.act2cool.com/html/へリンクしていただければ嬉しいです。
バナーはこちらにあります。

このページへいきなり来られた方はこちらがホームページ改造王です。