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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マイナスなら赤字で表示したい...
-
フォームの内容でリンク先URLの...
-
テキストフォームのチェックに...
-
Nullまたはオブジェクトのエラ...
-
プルダウンで選択された値を別...
-
テキストボックスのフォーカス移動
-
return trueとreturn falseの用...
-
チェックボックス付きのテーブ...
-
1つのページにformを2つ設置。2...
-
クリックさせたいが、click()が...
-
プルダウン選択を変更すると、...
-
新しくフォルダを作成したい
-
onClickとsubmitの処理順序
-
ラジオボタンと連動して文字列...
-
javascriptで二重送信防止
-
チェックボックスのON/OFFでVal...
-
jQueryで設定したイベントハン...
-
確認ダイアログの出し方(JavaS...
-
フォーム内の同一名のエレメン...
-
<JavaScript>tableタグを入力不...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tabindexの取得
-
TextBoxに半角数字以外を入れた...
-
ページ間で変数を保持したい
-
JavaScriptでCGIの呼出し・...
-
テキストエリアに履歴を残したい
-
マイナスなら赤字で表示したい...
-
フォームの内容でリンク先URLの...
-
jQueryのdatepickerの日付が選...
-
プルダウンで選択された値を別...
-
VBscriptの配列変数をJavascrip...
-
onBlurのイベントを使ってデー...
-
改行コード変換しても、引数の...
-
HTMLファイル同士での値渡し
-
VBSからjavascript
-
HTMLとJavaScriptで作った表示...
-
FireFoxでfocus()が上手く動かない
-
カーソルが当たった箇所に吹き...
-
どちらかひとつのテキストボッ...
-
フォーカス設定について教えて...
-
一度もフォーカスされないテキ...
おすすめ情報