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

function functionName()
{
var select1 = document.forms.formName.selectName1;
var select2 = document.forms.formName.selectName2;
var select3 = document.forms.formName.selectName3;

select2.options.length = 0;
select3.options.length = 0;

if (select1.options[select1.selectedIndex].value == "A")
{
select2.options[0] = new Option("A1");
select2.options[1] = new Option("A2");
}
switch(select2.options[select2.selectedIndex].value){
case "A1":
select3.options[0] = new Option("AAA");
select3.options[1] = new Option("AAAA");
break;
case "A2":
select3.options[0] = new Option("AAA");
break;
default :
alert( "エラー:異常値です。" );
}
}
//-->
</script>
</head>
<body bgcolor onLoad="functionName()">
<form name="formName" method="post" action="./pathToProgramFile">
<select name = "selectName1" onChange="functionName()">
<option value = "A">A</option>
<option value = "B">B</option>
</select>
<select name = "selectName2">
</select>
<select name = "selectName3">
</select>
順番に1→2→3と選んだ後、ボタンを押して別ページに飛ぶモノを作りたいと思っています。
これでSelectName1がAの時で、selectname2がA1の時のselectname3にcaseA1の値は表示できるのですが、
A2に選択肢なおすと表示ができないので何が原因か知りたいです。
1が選ばれない限り、2と3には値が表示しないようにしたいです。

●質問者: たつ
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● tdoi

期待通りに動かない原因はいくつかあります。

1.select2を変更した際のイベントハンドラがないため、A1をA2にしても何も処理ができない。

2.A1からA2に変更した際にオプションの数が減ることを期待していると思いますが、その記述がない。

元のソースをなるべく活かして書き換えるなら、こんな感じでしょうか。

<html>
 <head>
 <script language="JavaScript">
<!--
var select1;
var select2;
var select3;
// ロード時に実行
function onInit()
{
 select1 = document.getElementById('select1');
 select2 = document.getElementById('select2');
 select3 = document.getElementById('select3');
 select2.options.length = 0;
 select3.options.length = 0;
}
// select1の変更時に実行
function onChangeSelect1()
{
 if (select1.options[select1.selectedIndex].value == "A") {
 select2.options.length = 0;
 select3.options.length = 0;
 select2.options[0] = new Option("A1");
 select2.options[1] = new Option("A2");

 onChangeSelect2();
 }
}
// select2の変更時に実行
function onChangeSelect2()
{
 // 新しいoptionの設定の前にクリア
 select3.options.length = 0;
 switch(select2.options[select2.selectedIndex].value)
 {
 case "A1":
 select3.options[0] = new Option("AAA");
 select3.options[1] = new Option("AAAA");
 break;
 case "A2":
 select3.options[0] = new Option("AAA");
 break;
 default:
 alert( "エラー:異常値です。" );
 }
} 
//-->
 </script>
 </head>
 <body bgcolor onLoad="onInit()">
 <form name="formName" method="post" action="./pathToProgramFile">
 <select id="select1" name="selectName1" onChange="onChangeSelect1()">
 <option value=""></option>
 <option value="A">A</option>
 <option value="B">B</option>
 </select>
 <select id="select2" name="selectName2" onChange="onChangeSelect2()">
 </select>
 <select id="select3" name="selectName3">
 </select>
 </form>
 </body>
</html>

select1を選択するまでselect2とselect3を空にしたいとのことだったので、select1のオプションに空のものを追加してます。

何かの参考になれば。


たつさんのコメント
ありがとうございます。 javascriptやりはじめたばかりで全然わからず右往左往しておりました。

tdoiさんのコメント
分からない部分があれば、コメントなりで言ってください。出来る範囲で答えますので。

たつさんのコメント
自分で調べて、そこから取ってきたのですがもっと他の方法があれば教えて欲しいです

tdoiさんのコメント
同じようにページ内に全て埋め込む方法だと、 http://jsajax.com/Articles/nesteddropdown/487 のようになると、少しスマートかもです。 あと、この手の方法でよくやる手としては、onChangeを拾ってAJAXを使って、子供のセレクトボックスの中身を用意するという形でしょうか。もう少しスマートにかけるかもです。 こんな感じ http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ こっちはいきなりだと、ちょっと分からないかもです。

たつさんのコメント
ありがとうございます。

たつさんのコメント
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/を やってミましたらやはりうまく動きません。勉強不足だと思いますが

tdoiさんのコメント
単純にJavaScriptで完結してないですからね。 PHPで書かれたサーバの処理、JsvaScriptで実行するクライアントの処理の結果のHTMLが画面に表示されるということのイメージがわきにくいかもです。
関連質問

●質問をもっと探す●



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