<select>タグの幅設定
- <select>タグの幅を設定する方法について詳しく教えてください。
- 空白のリストボックスに選択内容を登録する仕組みを作成したいですが、<select>タグの幅が小さくなってしまいます。
- 他の方法ではなく、<option>タグ内やJavaScriptで<select>タグの幅を設定する方法があれば教えてください。
- ベストアンサー
<select>タグの幅設定
空白のリストボックスを作成し、別ページで選択した内容をそのリストボックスに登録する仕組みを作ろうとしています。 普通に **************** <select size=～> <option></option> … </select> **************** とすると、リストボックスの幅が１文字分ぐらいのサイズになってしまいます(内容を登録すれば、最大文字長内容に対応したサイズになります)。 <option>タグの中に空白を埋めるという方法もあるのですが、他の処理も修正しないといけなくなるので、最後の奥の手としか使いたくありません。 <option>タグ内、もしくはjavascript内で設定する方法ってあるんでしょうか？
- puntoabart
- お礼率35% (10/28)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
-> 「ひとまず」というのは、設定ピクセル以上の長さの内容が登録された場合、 -> 表示が見切れてしまう問題が発生するからです。 -> でも、リストボックスにスクロールバーはつけられませんよね・・・？ そうでした。 [ リストボックスオブジェクト ].style.pixelWidth=[ 整数値 ] で、JavaScriptからサイズ変更できます。 ですが、登録された内容（ 文字列の長さ ）を如何にしてピクセル値に変換する かが、悩みどころだと思います。 （プロポーショナルフォントだと文字によっては同じ文字数でも表示幅は違って きますから・・・）
その他の回答 (1)
- 387
- ベストアンサー率66% (40/60)
スタイルシートを使って指定するしか無いように思います。 例えば次の様にすると、幅が 100ピクセルになります。 <select style="width:100" size=～> <option></option> ・・・ </select>
補足
ありがとうございます。ひとまず問題解決です。 「ひとまず」というのは、設定ピクセル以上の長さの内容が登録された場合、表示が見切れてしまう問題が発生するからです。 でも、リストボックスにスクロールバーはつけられませんよね…？
関連するQ&A
- セレクトフォームでタグの受け渡し
チャット等についているセレクトフォームでタグの受け渡しをしたいのですが、無理でしょうか？ 例として某チャットの顔文字部分をあげると <select NAME="emoji" SIZE="1"> <option VALUE="" selected>なし<option VALUE="(＾＾)">にこにこ （以下略） </select> とありますが、この(＾＾)部分をHTMLタグの <font color=" ">や<hr>に変更したいのです。 可能でしょうか？
- ベストアンサー
- CGI
- <SELECT>への読込
セレクトボックスを選択してＤＢに保存したデータを、 再びセレクトボックスに読み込む方法を考えています。 (案1).optionタグの中に、データが一致したらselectedを付加するIF文を作る。 <select name="ramen"> <option value="1" <% If vbtmp="1" Then %>selected<% End If %> >醤油</option> <option value="2" <% If vbtmp="2" Then %>selected<% End If %> >味噌</option> <option value="3" <% If vbtmp="3" Then %>selected<% End If %> >塩</option> </select> (案2).bodyタグのonLoad(JavaScript)を経由する。 <script language="JavaScript"> function Yomikomi() { document.fm.ramen.value = "<%=vbtmp%>"; } </script> 上記の案がありますが、実際に扱うセレクトボックスの量が多い為、出来る限りシンプルな作りを目指しております。 もっと良い方法がありましたらご教授願います。
- 締切済み
- Microsoft ASP
- セレクトボックスのデータをリストボックスへ書き出す
javascript初心者です。よろしくお願いします。 まず年月日を３つのセレクトボックスで作成する。 追加ボタンを押すと、選択した年月日のデータをリストボックスに書き出すことができる。 ※ここでリストボックスのサイズは３に指定しておき、項目が３以上の場合はスクロールさせる。 さらに削除ボタンを作成し、リストからデータを削除できるようにする。 以上のような仕組みを作りたいのですが．．． どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法
お世話になっております。 環境： Windows2000 IE6.0 HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。 STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。 セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。 ■ソース■ <html> <head> <STYLE TYPE="text/css"> <!-- SELECT { width: 100px; } --> </STYLE> <title>サンプル</title> </head> <body> <select name="" selected> <option name="0">選択肢１</option> <option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option> <option name="0">選択肢３</option> <option name="0">選択肢４</option> </select> </body>
- ベストアンサー
- HTML
- javascriptでセレクトボックスを動的に
javascriptでセレクトボックスの"selected"を動的に変更する方法を教えてください＞＜ 下記のselectedを"１０"から"５０"に変更したいのですが、 某ASPサービスの環境下での作業のため制約があり直接変更できません。 <body onload="event"> <select name="select"> <option value="10" selected="selected">10件</option> <option value="30">30件</option> <option value="50">50件</option> </select> そこで、JavaScriptで何とかしようと思うのですが、 <select>～ </select>の間（selectタグ含む）は、ASPサービスの制約でIDやclassを入れることもできず、 変更できるのは、body開始タグ部分、headerタグ内、body内（一部）です。 ページを読み込んだ際に、「５０件を選択」、「１０件からselected外す」状態にしたいです。 いろいろサイトを見てなんとなくできそうな気はするのですが、 スキル的に初心者レベルのため、わかりませんでした。 何卒よろしくお願いします！
- ベストアンサー
- JavaScript
- innerHTMLを使って<SELECT>へ<option>を追加する方法について
はじめまして。 表題の通りなんですが、今<SELECT>タグ内に<option>タグをinnerHTMLもしくはinsertAdjacentHTMLを使って追加しようと考えています。 ところが、なぜかどちらを使った場合にも一番初めの<option>タグが消されてしまいます。 <select id=insertion> <option>---------------</option> </select> ↓ <select id=insertion> ---------------</option><option>test1</option> <option>test2</option> </select> となってしまうのです。スクリプトは以下のようなものを使っています。 function insertion(elementId) { elem = document.getElementById(elementId); elem.innerHTML += '<option>test1</option><option>test2</option>'; } 環境はWindowsXP、IE6.0です。単純にIE6.0のバグのような気もしないでもないんですが・・・。 ちなみに、innerHTMLもしくはinsertAdjacentHTMLを使う以外の方法例えばappendChildとかは使えません。というのも、prototype.jsを使ってAjax.Updaterを使ってリストボックスの自動生成を考えているのですが、Ajax.Updaterがフィールドの置換に使っているメソッドがinnerHTMLかinsertAdjacentHTMLな為、appendChildとかを使った方法だと修正が大掛かりになってしまうので・・・。
- 締切済み
- その他([技術者向] コンピューター)
- <SELECT>タグでの selectを→間違い
<SELECT>タグでの selectを初めに表示させたいのですが、 できますでしょうか。 先の質問、文を間違えました、すいません。 訂正します。 ｃが選択状態で、何も表示されず、 以下のｂを選べば、２が表示されますが、 何も選んでいないとき、ｃを選択した状態で、 ３を表示させておきたいのですが 可能でしょうか。 onloadで、読みだす方法とかで可能なのでしょうか。 よろしくおねがいいたします。 <p> <form name="test"> <select name="linkselect" onChange="n()"> <option value="">選択して下さい</option> <option value="1">a</option> <option value="2">b</option> <option value="3"selected>c</option> </select> </form> </p>
- ベストアンサー
- JavaScript
- Strutsでoptionタグの作り方
例えばActionFormのメンバにBeanのリストがあるとして、 JSPではStrutsのhtmlタグを使ってselectボックスのoptionに ActionForm内のBeanリストをセットする方法を教えて下さい。 具体的に実現したいことは以下のような事です。 例＞ // アクションフォーム public sampleForm extends ActionForm { private List<sampleBean> sampleBeanList; // getter、setterは省略 } // JSPでStrutsタグ（<html:select>とか<html:options>）を使って以下のようなセレクトボックスを作成したい！ // 実現方法をご存知のかた、どうかご教示ください。 <select> <option value="sampleBeanのプロパティ">sampleBeanのプロパティ</option> <option value="sampleBeanのプロパティ">sampleBeanのプロパティ</option> <option value="sampleBeanのプロパティ">sampleBeanのプロパティ</option> <option value="sampleBeanのプロパティ">sampleBeanのプロパティ</option> </select> ちなみに環境は以下の通りです。 Java 1.6 Struts 1.3.8 Tomcat 6 以上、宜しくお願い致します。
- 締切済み
- Java
- セレクトボックスについて
現在、PHP画面を使って登録画面を作成しています。 必要事項を打ち込んだら、「確認」のボタンを押し、ページジャンプして 打ち込んだ内容を確認させその内容でよければ「登録」ボタン、 修正したければ「修正」ボタンといった流れで、修正ボタンを押すと 必要事項を打ち込んだ画面に戻るようにしているのですが、 その際、セレクトボックス(<select>)に最初に打ち込んだ内容を表示させたいのですが どうしたらいいのでしょうか？ (最初にセレクトボックスで「男」を選択していたら修正で戻っても「男」が選択されているようにしたい) input typeのtextで打ち込んだ内容はセッションと変数を使ってvalueに値を入れたら 表示することができたのですが… 回答お待ちしています。
- ベストアンサー
- PHP
- <SELECT>タグの折り返し
テーブルで横幅100で囲った枠の中に、<select>タグを表示しています。 このとき、optionで表示する項目が長いと、テーブルの横幅が伸びてしまいます。 テーブルの横幅が伸びないようにする方法はないでしょうか？ できれば、optionの項目を折り返し表示するとか、プルダウンしたときだけテーブルを突き抜けて表示するとかできれば良いのですが。 たとえば、こんな感じです。 <table border="1" width="100"> <tr> <td> <select name="test"> <option value="d1">1234567890123456789012345678901234567890</option> <option value="d2">1234567890123456789012345678901234567890</option> <option value="d3">1234567890123456789012345678901234567890</option> </select> </td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- HTML
お礼
やっぱりないですか…。 (少しだけ「実はあるんですよ」という解答を期待してたんですけど) 該当ページはフレーム分割の都合で縦長になっていて、 文字長ごとにリストボックスの大きさを変えると、ページ全体の幅も変わっていました(他のテキストボックスの表示なんかもバタバタ変わって少し見苦しかった)。 だから、ひょっとしたら固定してしまった方がいいのかもしれません。 本当にありがとうございました！