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人5回まで
  • 13歳以上
  • 登録:2011/11/09 18:33:56
  • 終了:2011/11/16 18:35:03

回答(1件)

id:tdoi No.1

tdoi回答回数174ベストアンサー獲得回数752011/11/09 19:16:56

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

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のオプションに空のものを追加してます。

何かの参考になれば。

他5件のコメントを見る
id:koonii26

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

2011/11/11 11:53:06
id:tdoi

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

2011/11/11 15:31:44

コメントはまだありません

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

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

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

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