みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

プルダウンからテキストボックスに入力

プルダウンから選択したものをテキストボックスに表示させています。

<script type="text/javascript">
function displayText(thatOption, textId)
{
var text1 = document.getElementById(textId);

text1.value = thatOption.title;
}
</script>


<SELECT onchange="displayText(this.options[this.selectedIndex], 'text1');">
<option value="1" title=""></option>  #空欄
<option value="2" title="A">A</option> #大文字
<option value="3" title="a">a</option> #小文字
</SELECT>

<input type="text" value="" id="text1">


プルダウンを2個や5個など複数用意して、それぞれ選択したものをテキストボックス1行に
続けて表示させたいです。
上記のプルダウンをA~Eまで用意した場合、[A b C D e]と表示させたり、Cは選ばず
空欄を選択した場合は、[A b D e]と表示させる事は可能でしょうか?

また、テキストボックスにvalue="ZZ"と初期表示を入れて、その後に
続くように表示させたいです。
[ZZ A b C D e]とする事は可能でしょうか?

投稿日時 - 2009-10-10 01:06:47

QNo.5355449

困ってます

質問者が選んだベストアンサー

さいごのtext1は、ひょうじだけだよね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<form action="#" name="abc">
<p>
<select onchange="p()" name="se">
<option value="" title="" selected></option>
<option value="A" title="A">A</option>
<option value="a" title="a">a</option>
</select>
<p>
<select onchange="p()" name="se">
<option value="" title="" selected></option>
<option value="B" title="B">B</option>
<option value="b" title="b">b</option>
</select>
<p>
<select onchange="p()" name="se">
<option value="" title="" selected></option>
<option value="C" title="C">C</option>
<option value="c" title="c">c</option>
</select>
<p>
<select onchange="p()" name="se">
<option value="" title="" selected></option>
<option value="D" title="D">D</option>
<option value="d" title="d">D</option>
</select>
<p>
<select onchange="p()" name="se">
<option value="" title="" selected></option>
<option value="E" title="A">E</option>
<option value="e" title="a">e</option>
</select>
<p>
<input type="text" value="ZZ" id="text1" name="text1">
</form>
<script type="text/javascript">
function p() {
var se = document.forms[ 'abc' ].elements[ 'se' ];
var cnt = 0;
var obj;
var txt = '';

while( obj = se[ cnt++ ] ) txt += ' ' + obj.value;
obj = document.forms[ 'abc' ].elements[ 'text1' ];
obj.value = obj.defaultValue + txt;
}

</script>

投稿日時 - 2009-10-10 07:30:02

補足

ありがとうございます。
動作確認しまして、希望する事ができました。
「text1」は表示のみです。

AとBの間をスペース空けずに表示させる事は可能でしょうか?
[ZZ Ab C D e]
スペースを空けないのはAB間のみで固定です。

投稿日時 - 2009-10-10 08:15:16

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

while( obj = se[ cnt++ ] ) txt += (cnt==1 ? '':' ') + obj.value;

投稿日時 - 2009-10-10 18:49:49

お礼

試してみましたが、[ZZA B C D E]となりました。
cnt==2としましたら、[ZZ AB C D E]が出来ました。
ありがとうございました。

投稿日時 - 2009-10-10 20:01:01

あなたにオススメの質問