セレクトボックスの値による入力フォーム背景色の切り替え
- セレクトボックスで値を選択してテキスト入力欄の背景色を変える方法を教えてください。
- JavaScriptを使用して、セレクトボックスで選択された値に応じてテキスト入力欄の背景色を変更する方法を教えてください。
- セレクトボックスの値を監視し、テキスト入力欄の背景色を変更する方法をお教えください。
- ベストアンサー
セレクトボックスの値による入力フォーム背景色の切り替え
セレクトボックスで選択された値を見て、 text入力欄の背景色を変えたいのですが、 JavaScriptの書き方がよくわかりませんので 教えていただけないでしょうか。 ----------------------------------------- セレクトボックス(SELECT_AREA)の値選択時に onChengeで呼び出して テキスト入力欄（MEMBER_NAME）の色を変えたい。 <html:select property="SELECT_AREA"> <html:text property="MEMBER_NAME" size="100" maxlength="20" style="background:#FF0000" /> ----------------------------------------------- よろしくお願いします。
- totoama
- お礼率14% (1/7)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
セレクトボックス・テキストエリアを下記のように設定した場合(htmlで) <select name="sec01" size="1" tabindex="0" onchange="javaScript:selectChange()"> <option value=""></option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> <textarea name="txtArea" rows="2" cols="20" tabindex="0"></textarea> javaScriptの関数 selectChange() を function selectChange() { selectValue = document.all["sec01"].value; txtStyle = document.all["txtArea"].style; if (selectValue == "a") txtStyle.background = "red"; if (selectValue == "b") txtStyle.background = "yellow"; if (selectValue == "c") txtStyle.background = "black"; if (selectValue == "") txtStyle.background = "white"; } と書けば、テキストエリアの背景色は変化するようになります。
関連するQ&A
- セレクトボックスの値を増やしたい
お世話になります。 セレクトボックスのOPTION値を増やしたいのですが、何か良い方法はないでしょうか。 実現したいことは、ボタンを押したときにテキストボックスの値をセレクトボックスの最下部に表示したいということです。 <INPUT TYPE="text" NAME="add_txt" VALUE=""> <SELECT NAME="lst"> <OPTION VALUE="aaa">aaa <OPTION VALUE="bbb">bbb <OPTION VALUE="ccc">ccc </SELECT> <INPUT TYPE="button" NAME="ent" VALUE="実行"> ------------------ この状態からtextに"ddd"という値を入れて実行ボタンを押した後、 <SELECT NAME="lst"> <OPTION VALUE="aaa">aaa <OPTION VALUE="bbb">bbb <OPTION VALUE="ccc">ccc <OPTION VALUE="ddd">ddd </SELECT> このような状態にしたいのですが、なにか方法はありますか。 ご存知の方いましたら、回答お待ちしています。
- ベストアンサー
- JavaScript
- セレクトボックスを使用した、フォームのアクティブ・非アクティブの切り替え
セレクトボックス（A）を使用して、（A）の選択結果により（A）以降をアクティブ・非アクティブに切り替えたいのです。 アクティブ・非アクティブの切り替え自体は正常に動くのですが、一度「送信する」をクリックした後、次の画面に移動し、その後「戻る」をクリックorブラウザの戻るで元のページに戻ると、アクティブ化できていたセレクトボックス（C）が全て非アクティブとなってしまっているのです。 原因は何でしょうか？よろしくお願いいたします。 function setTF() { n = document.mail.Data.selectedIndex; flag = eval(document.mail.Data.options[n].value); document.mail["B"].disabled = flag; document.mail["C"].disabled = flag; } ※以下HTML※ <form action="mail.cgi" method="post" name="mail"> <table> <tr> <th>セレクトボックス（A）</th> <td><select name="Data" onchange="setTF()"> <option value="false">アクティブ</option> <option value="true" selected="selected">非アクティブ</option> </select></td> </tr><tr> <th>テキスト（B）</th> <td><input size="4" type="text" name="B" disabled="disabled" /> 才</td> </tr><tr> <th>セレクトボックス（C）</th> <td><select name="C" disabled="disabled"> <option>選択肢1</option> <option>選択肢2</option> </select></td> </tr><tr> <td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- セレクトメニューで選んだ値をテキストボックスへ
４個のセレクトメニューで選択した値（文字列）を、自動で１個のテキストボックス（INPUT）に連結して入力する方法はありますか？ 例えば SelectMenuAで、「あい」を選択。 SelectMenuBで、「うえ」を選択。 SelectMenuCで、「おか」を選択。 SelectMenuDで、「きく」を選択。 その後に配置してあるテキストボックスに「あいうえおかきく」が表示される かたちです。 当方javascriptを勉強中の身で、サンプルプログラムをお見せいただけ ればと思います。 テキストボックスの値の連結ならできるのですが、セレクトメニューの選択値で 同じことをすることに手こずってます。
- ベストアンサー
- JavaScript
- プルダウン Or コンボボックスを選択したら、テキストボックスを入力不可にさせる方法
フォーム制御として、JavaScriptを使用して、プルダウンよりある項目が選択されたと同時に、あるテキストボックスの入力を不可、またはmaxlengthを0にしたいのですが、思うように出来ません。 maxlengthをvalue等に変更させたら値は変更されたので、 関数としての動きは問題なさそうです。 どなたか、ご教授お願いいたします。 ※現在下記のソースは、list番号を指定していません。 <script language="JavaScript"> <!-- function MM_jumpMenu(){ parent.document.form1.text1.maxlength=0; } //--> </script> <form name="form1" method="post" action=""> <select name="menu1" onChange="MM_jumpMenu()"> <option selected>unnamed1</option> <option>unnamed2</option> </select> <input type="text" name="text1" maxlength="10"> </form>
- ベストアンサー
- JavaScript
- セレクトボックスに追加する方法！
HTMLのフォームでテキスト入力の欄で5行にわたって 名前が表示されていると考えて2行目と5行目を選択して そのテキストフォームの下にインプットボタンがありそれを押すとセレクトボックスの中にある値に先ほど2つ選択した値を追加したい場合どういうロジックを書けばいいのでしょうか？ 何分プログラムを勉強し始めたばかりなのでご教授ください。
- ベストアンサー
- JavaScript
- javascriptでのセレクトボックスについて。
javascriptを使ったセレクトボックスについて教えてください。 教えてgooのカテゴリ選択のように、セレクトボックスでjavascripを使い、 一つめのselectボックスでは ・１ ・２ ・３ のオプションを選択可能に 二つめのselectボックスでは、 １が選択されたら ・１の１ ・１の２ ・１の３ のオプションを選択可能に ２が選択されたら ・２の１ ・２の２ ・２の３ を選択可能に ３が選択されたら ・３の１ ・３の２ ・３の３ を選択可能に と言う風にはどうすれば出来るでしょうか？ 教えてください、お願いします。
- 締切済み
- JavaScript
- select値でのフォームのaction値の変更
以下のようなフォームでselectの値によって PHPでactionのURLを変更させるようなことは出来るでしょうか。 <form name="form" method="GET" action="ここをselect値により変更"> <input type="text" name="word" id="word" value="" /> <select name="select" id="select"><option selected="selected" value="01">値01</option> <select name="select" id="select"><option selected="selected" value="02">値02</option> <select name="select" id="select"><option selected="selected" value="03">値03</option> </select> </form> 以上、どうぞ宜しくお願い申し上げます。
- ベストアンサー
- PHP
- セレクトボックスの値を保持したい。
お世話になります。 カスタムフィールドで設定した値を取り込み、セレクトで選択出来るようにしています。 ページ遷移後に選択した値を保持した状態にしたいのですが、手法が分かりません。 <?php $my_tax = 'area'; $parent_terms = get_terms( $my_tax, array('hide_empty' => false, 'parent' => 0) ); ?> <select name="area"> <option value="">エリア</option> <?php for($i = 0; $i < count($parent_terms); $i++){ ?> <?php $term = $parent_terms[$i]; ?> <option value="<?php echo $term->term_id; ?>"><?php echo $term->name; ?></option> <?php } ?> </select> こちらをどう変更したら宜しいでしょうか？
- 締切済み
- PHP
- テキストボックスで入力したデータを変数に入れてリンクで飛ばせる？
Struts + JSPで DynaValidatorFormに格納した値を <html:text property="id" size="10" maxlength="8" /> <html:text property="name" size="80" maxlength="50" /> こんな感じでhtml:textとかで取り出すと思いますが、 次画面に遷移する際、html:textにユーザーが入力した値を 変数に入れる方法ってないでしょうか？ リンクで画面遷移するときに値をもたせたいので html:formではなく くhtml:link action="/hoge?<% id %>&<% name %>..." /> こんな感じでやりたいのです。 良い方法はあるでしょうか？
- ベストアンサー
- Java
- セレクトボックスのハイライトの色を変更
セレクトボックスのハイライトの色を変更できますか。 「セレクトボックスのハイライト」とは、セレクトボックスのある値を選択したときに、テキストを選択したときと同じように紺色の色でハイライトされる状態のこと。文字変換の時の状態の反転も同様。 ハイライトというよりも反転と言ったほうが適切かもしれません。 ※ STYLE="Background-Color : yellow" のことではなく。
- ベストアンサー
- CSS
