HTMLでフォームを作っています。
セレクトメニュー(クリックするとメニューが出てきて一つ選ぶやつ)がいくらかあります。

前のセレクトメニューの選ばれたものによって、次のセレクトメニューの選択肢を変更するにはどうすればよいのでしょうか?
cgiの実行も可能です。
御願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<HEAD>内に


-----------------

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


var valList = new Array();
valList[0] = new Array();
valList[1] = new Array();
valList[0][0] = new Array();
valList[0][1] = new Array();
valList[1][0] = new Array();
valList[1][1] = new Array();

valList[0][0][0] = "トマト"
valList[0][0][1] = "キュウリ"
valList[0][0][2] = "キャベツ"

valList[0][1][0] = "1"
valList[0][1][1] = "2"
valList[0][1][2] = "3"

valList[1][0][0] = "メロン"
valList[1][0][1] = "みかん"
valList[1][0][2] = "なし"

valList[1][1][0] = "4"
valList[1][1][1] = "5"
valList[1][1][2] = "6"



function ListOut(){

var i,n
n = document.jump.list1.selectedIndex;
for(i = 0; i <= 2; i++){
document.jump.list2.options[i].text = valList[n][0][i];
document.jump.list2.options[i].value = valList3[n][1][i];
}

}

//-->
</script>


------------------
<BODY>部に

<form action= "aaa.htm" method = "post" name = "jump">

<select name="list1" size="1" onchange="ListOut()">
<option value = 0 SELECTED>野菜</option>
<option value = 1>果物</option>
</select>

<select name="list2" >
<option></option>
<option></option>
<option></option>
</select>


</form>
--------------------

こんな感じでしょうか?テストしてないんでわかりませんが。
    • good
    • 0
この回答へのお礼

みなさん、ありがとうございました。
試行錯誤した結果、なんとかできました。
ありがとうございました

お礼日時:2002/02/05 22:13

同じページ内のセレクトメニューなら、CGIではなくてJavaScriptになります。



function before_clicked() {
if ( before.selectedIndex == 0 ) {
next.options[0].name='peach';
next.options[0].value='もも';
next.options[1].name='apple';
next.options[1].value='りんご';
} else {
next.options[0].name='tomato';
next.options[0].value='とまと';
next.options[1].name='nankin';
next.options[1].value='かぼちゃ';
}
}

この回答への補足

ありがとうございます。
ごめんなさい、無知なもので・・・
もう少し詳しく説明を御願いいたします。

補足日時:2002/02/03 01:45
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qセレクトメニューで選んだ値を同じページの別の場所へ表示する方法

セレクトメニューで選んだ値を同じHTML内の別の箇所へ表示させる方法がわかりません。
どなたか分かる方が居ましたら、回答お願い致します。
下記のような例です。

<BODY>
<FORM method="post" Name="Application" action="bin/regist.cgi" onSubmit="return Check()">
<input type="hidden" name="subject" value="申し込み"><input type="hidden" name="nexthtm" value="index.html">
<CENTER>
<SELECT name="RATE" size="1" tabindex="1">
<OPTION>▼選択</OPTION>
<OPTION value="ドル">ドル</OPTION>
<OPTION value="円" selected>円</OPTION>
</SELECT><BR><BR>
<TABLE border="0" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD width="90" align="center"><INPUT size="10" type="text" name="PRICE" tabindex="6" onChange="CheckTxt1(this.value);"></TD>
<TD></TD>
<TD>ここに選んだ単位を表示したい</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE border="0">
<TR><TD colspan="3" align="center">
<INPUT type="submit" value=" 送 信 " tabindex="45">    <INPUT type="reset" value=" リセット " tabindex="46">
<BR>
</TD></TR>
</TABLE>
</CENTER>
</FORM>
</BODY>

セレクトメニューで選んだ値を同じHTML内の別の箇所へ表示させる方法がわかりません。
どなたか分かる方が居ましたら、回答お願い致します。
下記のような例です。

<BODY>
<FORM method="post" Name="Application" action="bin/regist.cgi" onSubmit="return Check()">
<input type="hidden" name="subject" value="申し込み"><input type="hidden" name="nexthtm" value="index.html">
<CENTER>
<SELECT name="RATE" size="1" tabindex="1">
<OPTION>▼選択</OPTION>
...続きを読む

Aベストアンサー

その目的のセル内にinput要素でテキストボックスを置いておいて、そこに単位のデータを書き込むようにすれば良いのではないでしょうか。
すべて同じform要素内に含まれるとしたら、下記のようなものではいかがでしょう。

<select name="rate" size="1" tabindex="1" onChange="this.form.unit.value=this.options[selectedIndex].text">
<option>▼選択</option>
<option value="ドル">ドル</option>
<option value="円" selected>円</option>
</select>

select要素には、onChangeのイベントハンドラを仕込みます。 セレクトメニューが選択・変更されると、このフォーム内のunitという名前を持つ部品の値として、このセレクトメニューの選択されたオプション要素がもつテキスト(value値ではなく、optionタグに囲まれるテキストの方を参照させています)を渡します。 テキストではなく、value値を渡したい時は、「this.options[selectedIndex].text」のtextをvalueに書き換えて、「this.options[selectedIndex].value」としてください。
単位を表示させたい部分には、

<input name="unit" style="border: none;" value="円" readonly>

以上のソースを追加しておきます。 これはテキストボックスになっていますが、書き換えられないようにreadonlyを設定し、初期値として設定されている単位の「円」をこちらも初期値として表示させるようにしておき、またテキストボックスの境界線をスタイルシートで表示させないように指定しています。 スタイルシートが思惑通りに解釈されていれば、見た目はプレーンテキストのようになると思います。

これでいかがでしょう。 こちらの方法であれば、古いブラウザでも一応表示されると思います(スタイルシートが無視される可能性はありますが)。
参考まで。

その目的のセル内にinput要素でテキストボックスを置いておいて、そこに単位のデータを書き込むようにすれば良いのではないでしょうか。
すべて同じform要素内に含まれるとしたら、下記のようなものではいかがでしょう。

<select name="rate" size="1" tabindex="1" onChange="this.form.unit.value=this.options[selectedIndex].text">
<option>▼選択</option>
<option value="ドル">ドル</option>
<option value="円" selected>円</option>
</select>

select要素には、onChangeのイベントハンド...続きを読む

Qセレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法

お世話になっております。

環境:
Windows2000
IE6.0

HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。

STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。

セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。

■ソース■
<html>
<head>
<STYLE TYPE="text/css">
<!--
SELECT {
width: 100px;
}
-->
</STYLE>
<title>サンプル</title>
</head>
<body>
<select name="" selected>
<option name="0">選択肢1</option>
<option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option>
<option name="0">選択肢3</option>
<option name="0">選択肢4</option>
</select>
</body>

お世話になっております。

環境:
Windows2000
IE6.0

HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。

STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。

セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。

■ソース■
<html>
<head>
<STYLE TYPE="text/css">
<!--
S...続きを読む

Aベストアンサー

おっしゃるとおり、SELECTタグのwidthを指定すると、オプションに書かれている文字列が長い場合は、途中で切られてしまいます。
これはプルダウンメニューの仕様で、どうすることも出来ません。
また、オプションタグは改行を受付ませんので、改行して表示することも出来ません。

すべての文字列を出力する方法は、
1.幅の固定をあきらめる(一番長い文字列に幅を合わせる)
2.オプションのフォントサイズを小さくする
が思いつきます。

1は・・・あきらめましょうということです・・・
2は、ちょっと見にくくなるかもしれませんが、オプションのフォントサイズを小さくして、物理的にすべての文字列を固定長の中に収めてしまおうという寸法です。
ただし、あるオプション限定でサイズを指定するということは出来ませんので、SELECTタグに対してフォントサイズの指定をすることになります。
SELECT {
width: 100px;
font-size: 8px;
}

Qセレクトメニューのリンク

アイフレームを利用しているのですが
セレクトメニューでリンクするタグがありますよね?
普通だと、その同じ頁内にリンクされるのですが
アイフレームを利用しているので他の頁にリンクさせた員です。
セレクトメニューのリンクで他のフレーム(頁)にリンクさせるには
どうしたらいいですか?

Aベストアンサー

こんにちはchoko21さん、xruzです。

self.if1.location.href で動作しましたか?
動かない場合は parent.if1.location.href でやってみてください。

こんな方法もありますよ

<html>
<head>
<title></title>
</head>
<script language="JavaScript">
<!--
function lnk(h) {
document.all("lnk").href=h.options[h.selectedIndex].value;
document.all("lnk").click();
}
//-->
</script>
<body>
<form name="f">
<select name="" size="1" onChange="lnk(this)">
<option value="javascript:void(0)">Select MENU
<option value="b.html">HTML B
<option value="c.html">HTML C
</select>
<a name="lnk" href="javascript:void(0)" target="B"></a>
</form>
<iframe name="B" src="about:blank" width="200px" height="200px" frameborder="1">
</iframe>
</body>
</html>

がんばってくださいね(~:~i

こんにちはchoko21さん、xruzです。

self.if1.location.href で動作しましたか?
動かない場合は parent.if1.location.href でやってみてください。

こんな方法もありますよ

<html>
<head>
<title></title>
</head>
<script language="JavaScript">
<!--
function lnk(h) {
document.all("lnk").href=h.options[h.selectedIndex].value;
document.all("lnk").click();
}
//-->
</script>
<body>
<form name="f">
<select name="" size="1" onChange="lnk(this)">
<option value="javas...続きを読む

Qセレクトメニューの項目をファイルから

よろしくお願いいします。

セレクトメニューの項目を別に作成しているテキストファイルから読み込みことは可能でしょうか?

aaa.txt
北海道,青森県,岩手県,宮城県,・・・

aaa.html-セレクトメニュー
 |北海道|
 |青森県|
 |岩手県|
 |宮城県|
 | ・   |
 | ・   |
 | ・   |

webサーバー・・・HP-UX
web・・・IE
CGI開発言語・・・Perl
開発端末・・・windows2000(Tera Term 使用)

以上、よろしくお願いいたします。

Aベストアンサー

サーバにファイルがある場合は、CGIスクリプト記述している言語のファイルシステムで開くのが普通です。
てか、それしか知りません・・・

Perlの場合は、No1で記述したソースのとおりです。
Cだったらfopenとか。

参考URLであげた例は、クライアント側にファイルがある場合、ファイルを開けるかどうかについて議論しているようです。
今回はサーバにファイルがあるとのことなので、
open( FILE, "<○○.txt" );
がベストだと思います。

Qラジオボタンとセレクトメニューの連動が複数項目

前回の質問でフォームでラジオボタンとセレクトメニューの連動をおこなうことができましたが、これを複数項目で選択可能にしたいのですが、コードを教えて頂けませんでしょうか?

このような感じです。

用紙の種類
◎デザインA  ◎選択しない  ◎その他{        }
 デザインB
 デザインC

色数
◎デザインA  ◎選択しない  ◎その他{        }
 デザインB
 デザインC

<m(__)m>どうか宜しくお願い致します。

Aベストアンサー

現状がどのようになっているのか不明なので、適当に設定していますが…

こんな感じではどうでしょうか?(name=linkageのラジオボタンが対象)
(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">

</head>
<body>
<form action="#">
<div>用紙の種類</div>
<div>
<input type="radio" name="linkage" value="r1">
<select name="design">
<option value="A">デザインA</option>
<option value="B">デザインB</option>
<option value="C">デザインC</option>
</select>
</div>
<div>
<input type="radio" name="linkage" value="r2" checked>選択しない
</div>
<div>
<input type="radio" name="linkage" value="r3">その他
<input type="text" value="">
</div>
</form>

<form action="#">
<div>色数</div>
<div>
<input type="radio" name="linkage" value="r1">
<select name="design">
<option value="A">デザインA</option>
<option value="B">デザインB</option>
<option value="C">デザインC</option>
</select>
</div>
<div>
<input type="radio" name="linkage" value="r2" checked>選択しない
</div>
<div>
<input type="radio" name="linkage" value="r3">その他
<input type="text" value="">
</div>
</form>


<script type="text/javascript">
<!--
/*@cc_on@*/
(function(test){
document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){
 var t = evt./*@if(1)srcElement @else@*/target /*@end@*/;
 if(test(t)) setDisable(t);
}, false);

function setDisable(t){
 var i, elm, e, n, f = t.form;
 if(f) elm = f.elements; else return;
 for(i=0; e=elm[i++];)
  if(!test(e) && e.type!="submit" && e.type!="reset") e.disabled = true;
 elm = t.parentNode.childNodes;
 for(i=0; e=elm[i++];){
  n = e.nodeName;
  if(e!=t && (n=="INPUT" || n=="SELECT" || n=="TEXTAREA" || n=="BUTTON"))
   e.disabled = false;
 }
}
//初期設定
var i, e, inp = document.getElementsByTagName("input");
for(i=0; e=inp[i++];)
 if(test(e) && e.checked) setDisable(e);

})(function(e){
 return (e.nodeName=="INPUT" && e.type=="radio" && e.name=="linkage");
});
//-->
</script>
</body>
</html>

現状がどのようになっているのか不明なので、適当に設定していますが…

こんな感じではどうでしょうか?(name=linkageのラジオボタンが対象)
(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">

</head>
<body>
<form action="#">
<div>用紙の種類</div>
<div>
<input type="radio" name="linkage" value="r1">
<select name="design">
<option value="A">デザイン...続きを読む


人気Q&Aランキング

おすすめ情報