SELECTタグの選択肢において、複数の要素を表示する方法はありますか

このQ&Aのポイント
  • SELECTタグの選択肢に複数の要素を表示する方法はありますか?要素は一行に表示したいと考えています。
  • 年齢と職業のテキストの始まり位置を揃えながら、SELECTタグで複数の要素を一行に表示したいです。
  • テキストの文字数で揃えようとしたが、文字幅の違いで上手く揃わない。テーブルを使用してもスクロール時に同期しない問題がある。どなたか解決策を教えてください。
回答を見る
  • ベストアンサー

SELECTタグの選択肢において、複数の要素を表示する方法はありますか

Multipleのセレクトボックスを使用したいのですが、その際に 複数の情報を一行に表示したいと考えています。 (例: 下のうち、Aさん、Bさんというところをセレクトボックスで表示したい) 名前    年齢    職業 ----    ------   ---- A-san    A-sai    A B-san    B-sai    B  :     :     : この際、年齢、職業のテキストの始まる位置を揃えたいのですが、 どのようにすればよいか、教えて頂けないでしょうか。 (使用される文字は、半角英数字のみです。) 1) テキストの文字数を数えて、すぺーすで文字数を揃えようとしたのですが、文字幅が異なるためうまくそろわない 1) テーブルでただ区切り、表示するだけでは、スクロールするときに 同期せずにつかえない といった形で困っています。 どなたかからお知恵を拝借できると助かります。 どうぞよろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数2

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

同期は厳しいのでcssなどでselectのfont-familyを monospace(固定幅)にしてみてはいかがでしょうか? <form> <select style=" font-family:monospace"> <option>名前    年齢    職業</option> <option>----------------------------</option> <option>A-san    A-sai    A</option> <option>B-san    B-sai    B</option> </select> </form>

bumpei617
質問者

お礼

見事に解決致しました! ドンピシャの回答、本当にどうもありがとうございました。

関連するQ&A

  • 複数のselectボックスの動的リンク

    javascriptを使って複数のselectボックスを動的にリンクさせ、なおかつ一度選択すると、次回開いたときにselectボックスの値が前回選んだ値と同じものが初期値になる、というようなことがしたいのですがやり方がわかりません。どなたか教えてくださいっ!! 例)select1:統轄名   select2:営業所名   select3:担当者名   select4:担当店   textボックス  :日付を手で入力 上下に分かれたフレームの上のフレーム部分に上記のように4つのselectボックスと1つのtextボックスがあり、 1.select1で統轄を選ぶとselect2にはその統轄内の営業所だけが表示される 2.select2で営業所を選ぶとselect3にはその営業所の担当者だけが表示される 3.select3で担当者を選ぶとselect4にはその人が担当しているお店が表示される 4.更にお店を選んでtextボックスに日付を入力すると、その日付以降の注文が下のフレームに表示される そして次回表示したときには、前回選んだものがselectボックスの初期値になっている というようなことがしたいのです。 よろしくお願いします★                  

  • SELECTタグで変更禁止にする方法

    下記のようなSELECTで変更を禁止したいです。 <form name="MyForm"> <select name="MySelect" multiple> <option val="1">A</option> <option val="2" selected>B</option> <option val="3">C</option> <option val="4" selected>D</option> </select> disabledという手もありますが、選択されている状態を保持したまま 変更禁止にしたいです。 また、textareaなどに入れて、readonlyとという手もありますが、 状態によっては変更可能にもしたいので、SELECTのままが良いです。 もちろん方法論はjavascript以外でも構いません。 宜しくお願いします。

  • selectボックスで選択数を制限したい

    入力画面を作成しています。 この画面に、複数選択可能なselectボックスを配置したいと思っています。 この時、選択できる個数を制限したいのですがどのようにすればよいでしょうか? <select multiple size="3" name="test">   <option value="" selected></option>   <option value="1">A</option>   <option value="2">B</option>   <option value="3">C</option>   <option value="4">D</option>   <option value="5">E</option> <select> 初期値が「""」となっており、selectボックスで何も選択せずに登録することも可能で、 何か選択された時は、最大3つまでしか選択できないようしたいと思っております。 そして、最大3つまでしか選べようにした上で、その3つの中に初期値の「""」が含まれていた場合はメッセージを表示させる。 以上の事をやりたいのですが、どのようにすれば良いでしょうか? 助けてください。よろしくお願いします。

  • チェックボックスを複数選択したら文字を表示したい

    フォームを作っています。チェックボックスがいくつかあるのですが特定のボックスをクリックしたら、別のテキストエリアにメッセージを表示したいのですが、可能ですか? たとえば、ボックスA~Gのうち、BとDが選択されたら、"etc"というテキストエリアに「ようこそ」と表示する。 できれば、ボックスを選択しただけで、表示してくれると最高にうれしいのですが。 ぜひ教えてください。

  • 複数の条件で、csvファイル内から表示させたい。

    ボタンを押すと、テキストボックス・コンボボックスの文字を読み取って、 用意してあるcsvファイルから、一致するデータをリストボックスに表示できるようにしようとしています。 If (A = TextBox1.Text) And ・・・(F = ComboBox1.SelectedItem)Then G = Items(0) & ・・・  Items(5) Me.ListBox1.Items.Add(G) こんな感じで「=」と「<>」を使って、考えられる全ての組み合わせで書いたのですが、思ったように表示されず困っています。 ボタンを押すと、AとBが両方とも一致しないと表示してほしくないのに、 Aに一致するものとBに一致するものがリストボックスに出てくる状態です。 色々とやってみたのですが、どれもうまくいかず、 私の考え方だとできない気がしたので、質問させていただきました。 どなたか、分かりやすく教えていただけませんか?

  • Selectボックスの一覧表示方法

    Selectボックスの一覧表示方法 いつもお世話になりますm(__)m <input type='text' name='hoge1'> <select name='hoge2'> <option value='1'>Aあああ</option> <option value='2'>Bいいい</option> <option value='3'>Cううう</option> </select> 上記のフォームがあった場合、hoge1を入力して、TABキーでhoge2のSelectボックスにフォーカスが移動した時、hoge2の一覧を表示させたいのですが、可能でしょうか? hoge2にフォーカスがある時に、キーボードのALT+↓を押した時と同じ動作を自動でしたいと思っています。 ※Accessでいうところの、xx.Dropdownと同じです いろいろ調べたところ、「onfocus="this.size=5"」でSelectボックス自体のサイズを変更して表示する方法は見つかりました。 しかし、上記のようにSelectボックス自体のサイズを変更せず、まさにALT+↓を押した状態(一覧が表示される状態)にしたいと考えています。 javascriptのonfocusで出来そうな気がするのですが、お詳しい方、是非ともお力添え下さい。 宜しくお願い致します。

  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • selectボックスの選択結果を変数に代入したい

    ブログのホームページで過去のブログカレンダーを表示させるために、年と月をセレクトボックスから入力して希望の年月のカレンダーを表示させようと頑張っています。 下記プログラムを作成しましたが、selectボックスから選択した年号を変数に代入することが出来ず、取得した年号をjavaの内部処理に使うことが出来ません。 考えられることはいろいろやってみましたが、全て変数に代入するところでうまくいきません。 よろしくご指導お願いします。 <html> <head> <title>選択された表示テキストを取得する</title> </head> <body> <select name="year" onchange="alert(getSelectedText(this))"> <option value="1">2014</option> <option value="2">2013</option> <option value="3">2012</option> </select><a>年</a> <script type="text/javascript"> function getSelectedText(obj){ var txt = obj.options[obj.selectedIndex].text; // 表示テキスト取得 return 'text = ' + txt; // 表示テキストをリターン var selectYear = text; // 表示テキストを変数に代入 } alert(selectYear); // 変数の内容をアラート表示 /*if(selectYear==2014){           // 変数を内部処理に使用 document.write('\ <select name="month" onchange="selectMonth(this)">\ <option value="1">1</option>\ <option value="2">2</option>\ <option value="3" selected>3</option>\ <option value="4">4</option>\ </select><a>月</a>\ ');*/ </script> </body> </html>

  • テキストの表示方法について

    テキストボックス(又はオートシェイプ・四角形でも可)に 文字をを入力するとします。 その入力した文字をA1セルに表示させたい場合、 どのようにしたらよいのでしょうか? よろしくお願いします。

  • ボタンクリックで別フレームに文字表示する方法

    Javascriptでチェックボックスにチェックを入れた時、 別フレームのテキストエリアに文字を記入するよう以下のif分を使っています。 if(document.○○.○○.checked == true) { objTextarea.value += ○○ } これをチェックボックスではなくてbuttonをクリックする事で、 テキストエリアに文字を記入するように変更したいのですが、 checked == trueの部分を書き換えれば出来るのかと思い、 いろいろ試してみましたが上手く出来ません。 また、「A」と「B」のボタンがあるとすると、 「A」を押して文字を表示した後、「B」を押すと 「A」の文字がテキストエリアから消えるようにしたいのですが、 どのように記載すればいいか教えていただけませんでしょうか?