javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが
<FORM>
<SELECT NAME="select1">
<OPTION VALUE=""></OPTION>
<OPTION VALUE=" a">a</OPTION>
<OPTION VALUE=" b">b</OPTION>
<OPTION VALUE=" c"c</OPTION>
</SELECT>
<SELECT NAME="select2">
<OPTION VALUE=""></OPTION>
<OPTION VALUE=" 壱">壱</OPTION>
<OPTION VALUE=" 弐">弐</OPTION>
<OPTION VALUE=" 参">参</OPTION>
</SELECT>
<input TYPE="text" NAME="text1" VALUE="">
</FORM>
とこの様なフォームがあるとしまして
各SELECT で選択した各文字を
<input TYPE="text" NAME="text1" VALUE="">に追加したいんです。
SELECT一つなら出来たのですが
複数になると追加をどうするのかやり方がわからなくて・・・
一つのセレクトは一つしか選択できなくなればなお良いのですが・・・
どなたがご教授願えないでしょうか?
No.2ベストアンサー
- 回答日時:
こういうことではなく?
<script>
function changeFunc(f){
f.elements["text1"].value=f.elements["select1"].value+f.elements["select2"].value;
}
</script>
<FORM>
<SELECT NAME="select1" onchange="changeFunc(this.form)">
<OPTION VALUE=""></OPTION>
<OPTION VALUE=" a">a</OPTION>
<OPTION VALUE=" b">b</OPTION>
<OPTION VALUE=" c">c</OPTION>
</SELECT>
<SELECT NAME="select2" onchange="changeFunc(this.form)">
<OPTION VALUE=""></OPTION>
<OPTION VALUE=" 壱">壱</OPTION>
<OPTION VALUE=" 弐">弐</OPTION>
<OPTION VALUE=" 参">参</OPTION>
</SELECT>
<input TYPE="text" NAME="text1" VALUE="">
</FORM>
この回答への補足
誤って編集中に質問してしまいまして
編集できないようだったので困ったと思いながらちょっと放置してたら
まさか回答をいただけるとは思ってもいませんでした。
ありがとうございます!!
早速試してみてみなさんにお礼をしたいと思います。
素早い回答ありがとうございました。
確認したブラウザーの中一番動作したのでベストアンサーにさせていただきます。
ただIEの5.6.7で動かない様なので色々調べてみています。
ありがとうございました。
No.4
- 回答日時:
No.3様のおっしゃるとおりです。
さらに言えば、先にテキストボックスに入力した文字は
無視していいのか、あるいは前に挿入するのか、とか...
タイミングがよくわかりません。SELECTが選択される度に
書き換えるのも、出来なくはないですが、むしろフォーム
がサブミットされるタイミングで、連結しなおした方が
簡単だと思います。(目的がちがってたらあれですけど..)
<FORM onsubmit="add_sel_value(this)">
<SELECT NAME="select1">
<OPTION VALUE=""></OPTION>
<OPTION VALUE=" a">a</OPTION>
<OPTION VALUE=" b">b</OPTION>
<OPTION VALUE=" c"c</OPTION>
</SELECT>
<SELECT NAME="select2">
<OPTION VALUE=""></OPTION>
<OPTION VALUE=" 壱">壱</OPTION>
<OPTION VALUE=" 弐">弐</OPTION>
<OPTION VALUE=" 参">参</OPTION>
</SELECT>
<input TYPE="text" NAME="text1" VALUE="">
</FORM>
<script type="text/javascript">
function add_sel_value(f){
f.text1.value=f.select1.value + f.select2.value+ f.text1.value;
return true;
}
</script>
この回答への補足
誤って編集中に質問してしまいまして
編集できないようだったので困ったと思いながらちょっと放置してたら
まさか回答をいただけるとは思ってもいませんでした。
ありがとうございます!!
早速試してみてみなさんにお礼をしたいと思います。
No.3
- 回答日時:
考えるべき要素が複数あります。
(1)文字列の結合
これは+を使います。"A"+"B"→"AB"
(2)タイミング
何時、追加するのでしょうか?
選択を変更した時?何かボタンをクリックした時?
(3)結合の方法
select1が前、select2が後になるようにする?
間に何か区切り文字は入るのか?
これが分からないと答えようがありません。
この回答への補足
誤って編集中に質問してしまいまして
編集できないようだったので困ったと思いながらちょっと放置してたら
まさか回答をいただけるとは思ってもいませんでした。
ありがとうございます!!
早速試してみてみなさんにお礼をしたいと思います。
No.1
- 回答日時:
簡易的なものですが・・・
<script type="text/javascript">
var value1 = '';
var value2 = '';
function setText(obj) {
var selectValue = obj.value;
if (obj.name === 'select1') {
value1 = selectValue;
} else if (obj.name === 'select2') {
value2 = selectValue;
}
document.forms[0].text1.value = value1 + value2;
}
</script>
<FORM>
<SELECT NAME="select1" onchange="setText(this)">
中略
</SELECT>
<SELECT NAME="select2" onchange="setText(this)">
中略
</SELECT>
<input TYPE="text" NAME="text1" VALUE="">
</FORM>
とか。
>一つのセレクトは一つしか選択できなくなればなお良いのですが・・・
の意味がちょっと分からなかったのですが。
1回選択したらもう変えられないようにするということでしょうか?
もしそうであれば、disabled属性を使えばいいです。
この回答への補足
誤って編集中に質問してしまいまして
編集できないようだったので困ったと思いながらちょっと放置してたら
まさか回答をいただけるとは思ってもいませんでした。
ありがとうございます!!
早速試してみてみなさんにお礼をしたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TextBoxに半角数字以外を入れた...
-
tabindexの取得
-
HTMLファイル同士での値渡し
-
フォームの内容でリンク先URLの...
-
テキストボックスの背景色変更...
-
入力するテキストエリアをボタ...
-
jQueryのdatepickerの日付が選...
-
GetElementByIdがうまく取得で...
-
HTMLとJavaScriptで作った表示...
-
プルダウンで選択された値を別...
-
VBSからjavascript
-
テキストボックスに文字飾り表...
-
チェックボックスのON/OFFでVal...
-
正規表現で複数マッチ条件で悩...
-
onchangeイベントを強制的に発...
-
プルダウン 項目が多いので先頭...
-
return trueとreturn falseの用...
-
ラジオボタンのチェックが外れ...
-
【jQuery】input nameの文字列...
-
<input>の選択肢をプルダウンメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLとJavaScriptで作った表示...
-
GetElementByIdがうまく取得で...
-
tabindexの取得
-
TextBoxに半角数字以外を入れた...
-
JavaScriptで作ったアプリが正...
-
プルダウンで選択された値を別...
-
HTMLファイル同士での値渡し
-
フォームの内容でリンク先URLの...
-
ページ間で変数を保持したい
-
テキストボックスに初期値で1...
-
javascriptのちょっとした動作...
-
入力するテキストエリアをボタ...
-
jQueryのdatepickerの日付が選...
-
JSPでonChangeを強制発行するに...
-
マイナスなら赤字で表示したい...
-
大文字か小文字かを判断する方法
-
VBscriptの配列変数をJavascrip...
-
一部Enter無効化の方法を教えて...
-
テキストエリアに履歴を残したい
-
フォーカスが外れた時の入力チ...
おすすめ情報