- 締切済み
コンボボックスに色をつけたい
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- duckling
- ベストアンサー率47% (88/185)
補足程度なのですが、 <head> と </head> の中に <style type="text/css"><!-- select{ background-color:#ff0000; color:#ffffff; } --></style> と書けば、 そのHTML内のselectは全部変わります。 IEとNN6以上、ですね。今のところは。
- meke2
- ベストアンサー率41% (16/39)
下のhero1000さんに更に補足で。 <option style="background-color:red">abc</option> とすると裏地の色が赤になるハズです。確認はしてないですけど 前にこんな感じでグラデーションしたことがあります。 このスタイルもＩＥブラウザしか対応してないようです。
- hero1000
- ベストアンサー率29% (114/390)
他にも方法があるかもしれませんが・・・。 <option>タグでスタイル指定します。 たとえば質問文の例で、「abc」を赤で表示したいのでしたら <option style="color:red">abc</option> とやれば赤くなります。 ただインタネットエクスプローラでしか赤に見えないかもしれません。
関連するQ&A
- ＨＴＭＬのコンボボックスとの関連
ＨＴＭＬの同ページ内にコンボボックスＡとコンボボックスＢがあるとして、 <!-- JavaScript部------ --> <script language="javascript"> <!--// function cmdCtr() { if (document.forms[0].A.value=='a2'){ document.forms[0].B.disabled=true; document.forms[0].B.selectedIndex=0; document.forms[0].B.value="b1"; }else{ document.forms[0].B.disabled=false; } } //--> </script> <!-- HTML部----------- --> <FORM> <SELECT name="A" onChange="cmdCtr();"> <OPTION value="a1">a1</OPTION> <OPTION value="a2">a2</OPTION> <OPTION value="a3">a3</OPTION> </SELECT> <SELECT name="B"> <OPTION value="b1">b1</OPTION> <OPTION value="b2">b2</OPTION> <OPTION value="b3">b3</OPTION> </SELECT> </FORM> 以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとＢボックスが選択出来なくなり、Ｂボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか？ ちなみに、ＡボックスＢボックス両方がきちんと選択されている場合はエラーは起きません。
- ベストアンサー
- JavaScript
- phpで作る親子のコンボボックスについて
phpだけでコンボボックスを作りたいのですが良い方法が見つかりません。 javascriptを使う方法は下記サイトに方法が載っているのでわかるのですが、 http://phpjavascriptroom.com/exp.php?f=include/js/selectoption/pulldown.inc&ttl=%E9%80%A3%E5%8B%95%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3 post関数を使えば良いと思いますが、ページの移動なく、クリックイベントを条件分岐できないかと思案中です。助言をお願いします。 <?php $titles = array('さんぷる','サンプル'); $example = array('1', '2'); echo '<select name="test">'; foreach ($titles as $key => $sample) { if ($ibanners == $ibanner) { echo '<option name="' . $example[0] . '" value="' . $example[0] . '" selected="selected">' . $sample . '</option>'; } else { echo '<option name="' . $example[1] . '" value="' . $example[1] . '">' . $sample . '</option>'; } } echo '</select>'; $momo = array('さっかー','やきゅう','ばすけ','ごるふ'); $tetsu = array('サッカー','ヤキュウ','バスケ','ゴルフ'); echo '<select name="saikoro">'; foreach($momo as $bonbi) { if ($GODbonbi == $bonbi) { echo '<option name="カテゴリ01" value="' . $bonbi . '" selected="selected">' . $bonbi . '</option>'; } else { echo '<option name="カテゴリ01" value="' . $bonbi . '">' . $bonbi . '</option>'; } } foreach($tetsu as $bonbi) { if ($GODbonbi == $bonbi) { echo '<option name="カテゴリ02" value="' . $bonbi . '" selected="selected">' . $bonbi . '</option>'; } else { echo '<option name="カテゴリ02" value="' . $bonbi . '">' . $bonbi . '</option>'; } } echo '</select>'; ?>
- ベストアンサー
- PHP
- チェックボックス＆セレクトボックスからの検索
htmlからチェックボックス＆セレクトボックスを使って postgresで検索し、phpで表示するフォームを作っています。 チェックボックスで検索されたデータをセレクトボックスで 絞り込みたいのですがうまくいきません。 or の部分を and に変えたりしたのですが検索結果が 変わってしまいます。 どなたか教えてもらえないでしょうか。 HTML <input type="checkbox" name="chk1" value="1">chk1 <input type="checkbox" name="chk2" value="1">chk2 <select name="add"> <option value="北海道">北海道</option> <option value="沖縄">沖縄</option> </select> PHP if ($chk1 != "") { $sqlSelect .= "abc = '" . $chk1 . "' or "; } if ($chk2 != "") { $sqlSelect .= "abc = '" . $chk2 . "' or "; } if ($add != "") { $sqlSelect .= "add = '" . $add . "' ; }
- ベストアンサー
- PHP
- セレクトボックスで現在選択されている値
下記のセレクトボックスがあります。 print "<select name='atai'>"; print "<option value='abc'>abc</option>"; print "<option value='123'>123</option>"; print "<option value='xyz'>xyz</option>"; print "</select>"; 現在、選択されている値を $int の変数に入力 したいのですが、どうしたらいいのでしょうか。 例えば、$int=・・・・・・; というふうに代入 文でできることなのでしょうか。 この場合、現在表示されているCGIで、 $int が、abc か 123 か xyz か知りたい のです。
- ベストアンサー
- Perl
- ２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスの操作について
セレクトボックスの操作について ３つのセレクトボックスのうち、どれかを変更すると同じテキストのものに 残りの２つのセレクトボックスを変更したいと思っております。 同じテキストが無ければ<option value="">----------</option>をcheckedにしたいと 考えているのですが、どなたかご教授いただければと思います。 [変更したいhtml] <select name="house_kouzou_a" id="house_kouzou_a" class="a"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_b" id="house_kouzou_b" class="b"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_c" id="house_kouzou_c" class="c"> <option value="">----------</option> <option value="1">木造</option> <option value="3">鉄筋</option> <option value="4">その他</option> </select>
- ベストアンサー
- JavaScript
- コンボ(?)ボックスの項目の削除方法
タイトルどおりの質問なんですが、 コンボ(?)ボックスのある項目を選択した状態で「削除」ボタンを押すことにより その項目を削除する。というプログラムを作成しています。 ちなみにコードは以下のようになっています。 <INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();"> <SELECT Name="Option" MULTIPLE SIZE=10 > <OPTION value="01">１</OPTION> <OPTION value="02">２</OPTION> <OPTION value="03">３</OPTION> <OPTION value="04">４</OPTION> <OPTION value="05">５</OPTION> <OPTION value="06">６</OPTION> <OPTION value="07">７</OPTION> <OPTION value="08">８</OPTION> <OPTION value="09">９</OPTION> <OPTION value="10">１０</OPTION> </SELECT> function deldata(){ ・・・ ・・・ } この function deldata()の中の処理方法について教えてください。 初歩的な質問と思いますが、よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスの操作
<select name="example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="1" value="追加"> 例えば、上記のセレクトボックスの3を選択して送信ボタンを押したら、3以外の4つの数字の値を持ったセレクトボックス（select name="example2）を出現させたいのです。（example1を残したまま） 選択した数字以外の値を持ったセレクトボックスを出現させたいです。 <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="追加"> 上記のようになります。example2の1を選択し送信したら <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 上記の手順でセレクトボックスが3つに増えた場合のソースは次のような感じに <select name="example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="1" value="取り消し"> <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="取り消し"> <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 取り消しを押した場合、そのセレクトボックスを削除し、一番新しいセレクトボックス（example3）に削除された値を追加したいです。 example2を取り消した場合、 <select name="example3"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 どのように記述すれば実現可能でしょうか？ ご教示頂けますと幸いです。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- SELECT結果から動的にコンボボックスを作りたい
SELECT結果から動的にコンボボックスを作りたい SELECT結果を元に、コンボボックスを作りたいと思っています。 テーブル「bunsyo_tbl」から、3行の結果を受け取った時、 3回だけ回るループの中で動的にhtmlを作成し、コンボの行数を増やす、 といった事を実現させたいのですが、ループ内でhtmlを作成する部分が上手く行きません。 ご教授頂きたく質問いたします。 当方の環境はOSはWinXP SP3、 ?Apache 2.0.63 ?PHP 5.2.6 ?Mysql 5.0.51b です。 テーブル「bunsyo_tbl」の内容は bunsyo_id | bunsyo_name | maker 2345 | 鋼材購入明細 | 1 3322 | 耐圧試験結果 | 1 3442 | 腐食箇所リスト| 1 PHPとhtmlのソースは最後に書きます。（長いので） 目的は、PHP変数$temphtml の中身を、 <option value="2345">鋼材購入明細 </option> <option value="3322">耐圧試験結果 </option> <option value="3442">腐食箇所リスト</option> と、して、html文の中で<? $temphtml ?>で呼びコンボの行数を増やす事です。 WAMPに触れ2週間が経つ初心者です。 本質問前に十分に調べ、確認したつもりではいますが、 的外れな質問や、意味の通らない文章になっていましたらすいません。 よろしくお願いします。 -------------------- <?php （接続部省略） require_once("connect_db.php"); // select実行 $sql = "SELECT bunsyo_id,bunsyo_name FROM bunsyo_tbl WHERE maker = 1" ; $result = executeQuery($sql); //結果セットの行数を取得する。 $rows = mysql_num_rows($result); //コンボボックスの不定部分のhtml作成 if($rows2){ while($row = mysql_fetch_array($result)) { print($row['bunsyo_id']); print($row['bunsyo_name']); $temphtml .= "<option value=" .$row["bunsyo_id"]. ">" .$row["bunsyo_name"]. "</option>"; print($temphtml); } $msg = $rows."件のデータがあります。"; }else{ $msg = "レコード0件"; } ?> <!--コンボボックス作成。初期は空白選択--> <select name="doc_comb" size="1"> <option value="" selected="selected"></option> <? $temphtml ?> </select>
- ベストアンサー
- PHP
- チェックボックス、セレクトボックスを組み合わせた複雑な計算表を作りたい
下記のような条件を満たす計算表を作りたいのですが、どのように作っていけばいいのか、さっぱり分かりません。 殆ど初心者に近い状態で、このような複雑な計算表を作るのは不可能に近いのは分かっているのですが、是非、ご教授願いたいと思い、質問させて頂きたいです。 <html> <head> <title></title> </head> <body> <form name=all> <table> <tr> <td colspan=2>a</td> <td colspan=7> <input name=AA type=checkbox>AA <input name=BB type=checkbox>BB </td> </tr> <tr> <td colspan=2>b</td> <td colspan=7> <input name=CC type=checkbox>CC <input name=DD type=checkbox>DD </td> </tr> <tr> <td colspan=2>c</td> <td colspan=7><input name=nn type=text></td> </tr> <tr> <td colspan=2>d</td> <td colspan=7> <input name=EE type=checkbox>EE <input name=FF type=checkbox>FF <input name=GG type=checkbox>GG <input name=HH type=checkbox>HH </td> </tr> <tr> <td colspan=2>eA</td> <td colspan=7><input name=PP type=checkbox>PP</td> </tr> <tr> <td rowspan=5>eB</td> <td>e1</td> <td>i1</td> <td colspan=3> <select name=i1> <option>1</option> <option>2</option> </select> </td> <td>I2</td> <td colspan=2> <select name=i2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e2</td> <td>J1</td> <td colspan=3> <select name=j1> <option>1</option> <option>2</option> </select> </td> <td>J2</td> <td colspan=2> <select name=j2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e3</td> <td>K1</td> <td colspan=3> <select name=k1> <option>1</option> <option>2</option> </select> </td> <td>K2</td> <td colspan=2> <select name=k2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e4</td> <td colspan=7> <select name=l1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>f5</td> <td colspan=7> <select name=m1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td colspan=2>f</td> <td>f1</td> <td colspan=3><input name=oo type=text></td> <td>f2</td> <td colspan=2><input name=pp type=text></td> </tr> </table> <br> <input name=keisan1 type=submit value=計算1> <input name=clear1 type=reset value=クリア1> </form> <br> <table><tr> <td colspan=9> a～dの計<input type=text name=qq>-f1<input type=text name=rr>=ABC<input type=text name=ss> </td> </tr> <tr> <td colspan=9> eA+eBの計<input type=text name=tt>-f2<input type=text name=uu>=DEF<input type=text name=vv> </td> </tr> <tr> <td colspan=9>ABC+DEFの計<input type=text name=ww>×dで選択したときの代入数字=<input type=text name=xx></td> </tr> </table> <br> <input name=kei2 type=submit value=計算2> <input name=clear2 type=reset value=クリア2> </center> </body> </html> 条件として、 ・「a～d」は、必ず入力 ・「e～f」は、該当する場合にのみ ・チェックボックスの行は、どれか1つだけを必ず選択（複数選択した場合、注意を促す） ・セレクトボックスの行は、 該当する場合のみ ・最後に「計算」ボタンを押した時に、未入力の部分（a～d）の注意を促す 計算なのですが、 1．「a」のAAを選択、「b」のCCを選択、「c」に20を入力、「d」のEEを入力したときの場合の計算 その時、「d」のEEには10を代入という形で計算したい。（他のFF=20,GG=30,HH=40） ※「a」のBBを選択した場合は、「d」のEE=15,FF=17,GG=22,HH=27となった場合も 2．上記の条件に加え、「eB」の「e1」は1、「e2」も1を選択、「e4」は2を選択した時の計算 その時、「e1」には「100」を代入、「e2」は「150」を代入、「e4」には「80」を代入で計算したい 3．上記「2」の条件に加え、「f1」に150、「f2」に70と入力した場合、「a～d」の計算合計から「f1」を引き、「e」のAとBの計算合計から「f2」を引く 長くて条件等も分かりづらいかもしれませんが、宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。そうです、そうやりました。 ソースを覗いてみても、それが主流なんですかね？ あるＨＰを参考にやってたら、できました。 ありがとうございました。