ウォッチ
プルダウンメニュー（セレクトボックス）を２つ表示し、一つ目のメニューが選ばれると、それによって二つ目のメニューを変化させようとしています。WINDOWSのIEでは問題なく動作するのですが、MacのIE5では正しく動作しません。
フォームの画面では一つ目のメニューを選んだ時に二つ目のメニューの選択項目が変化し問題ないのですが、sendボタンを押したときにＣＧＩに二つ目のメニューの内容が伝わりません。MacのIE5ではinnerHTMLを使うと正しく動作しないのでしょうか。
----------------フォーム------------------
<HTML>
<HEAD>
<SCRIPT language=javascript>
<!--
var s0="";
s0 += '<option value="option0-1">option0-1</option>'
s0 += '<option value="option0-2">option0-2</option>'
var s1="";
s1 += '<option value="option1-1">option1-1</option>'
s1 += '<option value="option1-2">option1-2</option>'
function change() {
switch (Number(document.form1.select1.selectedIndex)) {
case 0:
document.all.obj1.innerHTML = '<select name="select2">' + s0 + '</select>';
break;
case 1:
document.all.obj1.innerHTML = '<select name="select2">' + s1 + '</select>';
break;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name=form1 action=test-cgi.cgi method=get encType=multipart/form-data>
<SELECT onchange=change(); name=select1>
<OPTION value="option0">option0</OPTION>
<OPTION value="option1">option1</OPTION>
</SELECT>
<BR>
<SPAN id=obj1>
<SELECT name=select2></SELECT>
</SPAN>
<INPUT type="submit" value="send">
</FORM>
</BODY>
</HTML>
No.4ベストアンサー
- 回答日時：
再度。
ソースの減量を計るのであれば、スクリプトに一ひねり加えればよいでしょう。 先のものに手を加えてみました。<html>
<head>
<script type="text/javascript">
<!--
var n=0;
optTxt = new Array();
optVal = new Array();
for (i=0; i<2; i++){ //「i<2」の2の値は、select1のoptionの項目数と同じにする
optTxt[i]= new Array(); //option要素のテキストを格納する配列
optVal[i]= new Array(); //option要素のvalue属性を格納する配列
}
/* 以上、二次元配列を作成 */
optTxt[0][0]="option0-1"; optVal[0][0]="option0-1";
optTxt[0][1]="option0-2"; optVal[0][1]="option0-2";
/* 以上、select1のoption0で用意するselect2のoption要素のテキストと値を配列に格納 */
optTxt[1][0]="option1-1"; optVal[1][0]="option1-1";
optTxt[1][1]="option1-2"; optVal[1][1]="option1-2";
optTxt[1][2]="option1-3"; optVal[1][2]="option1-3";
/* 以上、select1のoption1で用意するselect2のoption要素のテキストと値を配列に格納 */
for (j=0; j<optTxt.length; j++){
if (n<optTxt[j].length){ n=optTxt[j].length;}
}
/* 以上、select2のoption要素の最大数を取得 */
function change() {
for (i=0; i<n; i++){
document.form1.select2.options[i].text = "";
document.form1.select2.options[i].value = "";
}
/* 以上で用意してあるオプション要素の表示と値を全消去 */
x=document.form1.select1.selectedIndex;
for (k=0; k<optTxt[x].length; k++){
document.form1.select2.options[k].text=optTxt[x][k];
document.form1.select2.options[k].value=optVal[x][k];
}
/* 以上でオプション要素を書き換え */
}
function check(){
if (document.form1.select2.value!=""){ document.form1.submit();}
else{ return false; }
}
//-->
</script>
</head>
<body>
<form name="form1" action="test-cgi.cgi" method="get" onsubmit="check(); return false;">
<select onChange="change();" name="select1">
<option value="option0">option0</option>
<option value="option1">option1</option>
</select>
<br>
<select name="select2">
<script type="text/javascript"><!--
document.open();
for (op=0; op<n; op++){
document.write("<option></option>");
}
/* JavaScriptからoption要素を項目の最大数分書き出す */
document.close();
// --></script>
</select>
<input type="submit" value="send">
</form>
</body>
</html>
select2のoption項目は、head内の二次元配列部分で定義するように造ってあります。
ご質問によれば、innerHTMLを使う方法ではうまくいかないようですので、代替の方法としてinnerHTMLを使わないものを提示しています。 一応、手元のリファレンスではMacIE5.xでも動作するソースと紹介されているものを、改造していますが、動作確認は取っていません。 こちらも参考まで。
たびたび失礼しました。
-
-
- 0
- 件
-
教えていただいたソースを参考にして、innerHTMLの部分を書きなおしましたが、なんとかうまくいきそうです。本当にありがとうございました。
No.3
- 回答日時：
私のMac(Mac OS X 10.1.5 / IE5.2.3)で、このJALのページは、正しく表示されます。
ボタンを押した後の動作ももちろん正しいです。ソースをご覧になって、研究されてはいかがでしょうか？http://www.jal.co.jp/dom/jtime/main.html
参考URL：http://www.jal.co.jp/dom/jtime/main.html
-
-
- 0
- 件
-
No.2
- 回答日時：
可能であれば、DHTML的にセレクトボックス内の要素を変更するのではなく、オプション要素の内容をJavaScriptから書き換える方法を取るのではいかがでしょうか。
「document.form名.select名.options[index].text」でオプション要素の表示内容、「document.form名.select名.options[index].value」で各オプション要素が持つvalue属性にアクセスできますので、それを書き換える方法で代用できるのではないかと思います。
こうすると、Netscapeでも動作してくれるでしょう。
具体的にソースを書いてみました。
<html>
<head>
<script language=javascript>
<!--
function change() {
for (i=0; i<document.form1.select2.options.length; i++){
document.form1.select2.options[i].text = "";
document.form1.select2.options[i].value = "";
}
/* 以上で用意してあるオプション要素の表示と値を全消去 */
switch (Number(document.form1.select1.selectedIndex)) {
case 0:
document.form1.select2.options[0].text = "option0-1";
document.form1.select2.options[0].value = "option0-1";
document.form1.select2.options[1].text = "option0-2";
document.form1.select2.options[1].value = "option0-2";
break;
case 1:
document.form1.select2.options[0].text = "option1-1";
document.form1.select2.options[0].value = "option1-1";
document.form1.select2.options[1].text = "option1-2";
document.form1.select2.options[1].value = "option1-2";
document.form1.select2.options[2].text = "option1-3";
document.form1.select2.options[2].value = "option1-3";
break;
/* 以上でオプション要素を書き換え */
}
}
function check(){
if (document.form1.select2.value!=""){ document.form1.submit();}
else{ return false; }
}
//-->
</script>
</head>
<body>
<form name="form1" action="test-cgi.cgi" method="get" enctype="multipart/form-data" onsubmit="check(); return false;">
<select onchange="change();" name="select1">
<option value="option0">option0</option>
<option value="option1">option1</option>
</select>
<br>
<select name="select2">
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<input type="submit" value="send">
</form>
</body>
</html>
このソースでは、上記の方法でオプションを書き換えるようにしてあります。 オプション要素は、想定できる最大項目数の分だけ用意してください。
また、サブミットされた時、あまった分のオプション要素が空の値で送られるのを止めるために、onSubmitで送信されるセレクト要素の内容が空ではないかをチェックして、空の場合は送信しないようにもしてあります。
Macが手元にないので最終的な確認は取っていませんし、CGIとの連携についてもチェックしていませんので、参考程度に…
-
-
- 0
- 件
-
回答ありがとうございました。さっそく試してみます。
ただ、教えていただいた方法ですと、オプション要素が多くなった時にソースがかなり大きくなりそうです。innerHTML（あるいは同様の方法）を使ってMac版IE5でうまく動作する方法がわかる方がいらっしゃれば、教えてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。～運賃検索プログラムを完成させたい～ 1 2022/07/22 11:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
複数のプルダウンを1つにまとめ...
-
ラジオボタンとプルダウンを連...
-
スマホのフォームでのselect複...
-
同じ名前のセレクトがある場合...
-
selectのすべての値を送信する方法
-
selectのnameが配列の場合
-
2段階プルダウンで1段階目の選...
-
リストボックス内の重複したも...
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
セレクトボックスの連動処理に...
-
Mac版ＩＥ５でのinnerHTMLの動...
-
コードレビューをお願いします。
-
mailto機能について
-
select要素のvalueを配列で取得...
-
javascriptでセレクトボックス...
-
【javascript】連想配列からセ...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報
