ここから本文です

HTMLのSELECTタグで、選択された内容に該当する文字列をTEXTAREAに出力するには、...

exc********さん

2010/7/2616:58:39

HTMLのSELECTタグで、選択された内容に該当する文字列をTEXTAREAに出力するには、どうしたらよいですか?。

以下のHTMLを実行し、SELECT内容を変更しても
TEXTAREAに該当する文字列(URL)が表示されません。
どこが変なのでしょうか?

<HTML>
<HEAD>
<script language="JavaScript">
function ChangeText(index){
var str;
switch(index){
case 0:
str = "";
break;
case 1:
str = "http://www.yahoo.co.jp";
break;
case 2:
str = "http://www.msn.co.jp";
break;
case 3:
str = "http://www.google.co.jp";
break;
}
document.getElementById("TextArea").value = str;}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="TestForm">
<SELECT>
<OPTION VALUE="0" onChange="ChangeText(0)"></OPTION>
<OPTION VALUE="1" onChange="ChangeText(1)">サイト1</OPTION>
<OPTION VALUE="2" onChange="ChangeText(2)">サイト2</OPTION>
<OPTION VALUE="3" onChange="ChangeText(3)">サイト3</OPTION>
</SELECT><BR>
<TEXTAREA NAME="TextArea"></TEXTAREA>
</FORM>
</BODY>
</HTML>

閲覧数:
2,039
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

ara********さん

2010/7/2618:21:44

onchangeはselectに設置します。
あとNAME="TextArea"じゃなくIDですね。
getElementBy"Id"ですので。

セレクト要素.selectedIndex;で0,1,2,3(番目)が入ります。
また、単純に○番目で替えるのであれば、配列でやるとかんたん。

<script type="text/javascript">
function ChangeText(s){
var str = ["","http://www.yahoo.co.jp","http://www.msn.co.jp","http://www.google.co.jp"];
document.getElementById("TextArea").value = str[s.selectedIndex];
}
</script>
</head>
<body>
<form name="TestForm" action="#">
<p>
<select onchange="ChangeText(this)">
<option value="0" selected>--------</option>
<option value="1">サイト1</option>
<option value="2">サイト2</option>
<option value="3">サイト3</option>
</select></p>
<div><textarea id="TextArea" cols="30" rows="4"></textarea></div>
</form>
</body>
</html>

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

kuw********さん

2010/7/2621:44:32

フォームのパーツはname属性が基本です。もちろんそれはvalueを送信することが前提ですが、なればこそgetElementByIdはやめてフォームとフォームのパーツへのアクセスの仕方を覚えましょう。

document.forms["TestForm"].elements["TextArea"].value

ついで。せっかくなので配列を。

<script type="text/javascript">
function ChangeText (index) {
var str = ["", "http://www.yahoo.co.jp", "http://www.msn.co.jp", "http://www.google.co.jp"];
document.forms["TestForm"].elements["TextArea"].value = str[index];
}
</script>

と、だいぶ行数減らせます。あと、language属性は古いので、今時language属性で説明しているページは2度と参考にしなくていいです。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる