• 締切済み

セレクトボックス幅を小さく、選択肢の文字は全て表示

セレクトボックスの幅を小さめに指定し、選択肢の文字列は全て表示できる方法を探しています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_forminputcustomize/dropdownchecklist.inc&ttl=%90%DD%92u%83T%83%93%83v%83%8B 上記サイトの「長いテキスト、短いコントロール」のプルダウンのようにする方法が分かりましたら、ご教示よろしくお願いします。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご提示のページがそのサンプルサイトではないのですか？ ソースまで表示されてますので、そのままコピペして、後はスクリプトタグに書かれているｊｓファイルを設置すればとりあえず同じものができます。 （ｊｓファイルはリンクから辿れます。全部で3種類使用しているみたいです。） 配布元はこちら http://code.google.com/p/dropdown-check-list/ コードの記述方法とその効果の一覧（？）はこちら http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html

nomark
質問者

お礼

レスありがとうございます。 コードを記述してスクリプトをDLしてサーバーにUP！ テストで動作はするのですが、CGIに組み込んで動作をさせるとなぜか動きません。 もう少し格闘してみたいと思いますが、何かアドバイスして頂ける事がございましたら宜しくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • DWcs4のスニペットにこのJAVAを登録して使用

    すいません。詳しい方いましたら教えてください。 DWcs4のスニペットにこのjQueryを登録して使用はできるものなのでしょうか？ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんJAVAも超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。

    • ベストアンサー
    • CSS
  • ドリームウィーバーｃｓ４のスニペットでjQuery

    すいません。詳しい方いましたら教えてください。 ドリームウィーバーｃｓ４のスニペットにこのjQueryを登録して使用はできるものなのでしょうか？ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんjQueryとjavaスクリプトが超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。

    • ベストアンサー
    • CSS
  • ふきだし型のツールチップがIEだと

    こちらのサイトの http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tooltip Side Navigation Tooltip / Popup Bubble を使用しているのですが、 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_tooltip/sidenavigation_tooltip.inc&ttl=Side+Navigation+Tooltip+%2F+Popup+Bubble%E3%81%AE%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ふきだしに入れている内容が多いため、縦の長さがナビより長い状態です。 一度マウスオンしてふきだしを出した後、マウスをはなすと本来なら ふきだしが隠れるのですが、文字だけが見えた状態になります。 safariやfirefox、クロムではちゃんと隠れますが、IEだけは触れた後も ナビの下から文字が見えた状態になってしまいます。 IEのバグ？というかIEには対応していないのでしょうか。 どうかご回答お願い致します。 また、探したのですがもし似たようなツールチップがございましたら 教えて頂けると助かります。 どうぞ宜しく御願い致します。

  • ウェブページのスクロールついて

    こんにちは いつもお世話になっております。 指先が少し不自由なので、マウスオーバーでウェブページをスクロールできる フリーソフトを探しています。下のURLのようにできるといいのですが・・・ ご存知でしたらお教えください。よろしくお願いいたします。 http://mm3ta.net/startstop3u1.html 　最上段中央の「up 」「down」にマウスオーバーするとスクロールします。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/simplyscroll.inc 　要素を水平方向にスクロール（手動、スピード=5）や 　要素を垂直方向にスクロール（手動、スピード=5）の 　三角の部分にマウスオーバーするとスクロールします。

  • jQueryUI自動スライド右側リストを増やしたい

    http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記の自動スライドなのですが、例では４項目なのですが、10項目くらいに 増やして利用したいと思っています。 単純に10個に増やすと、左の画像部分はきちんと10個目まで表示されますが、 右側は６個目から隠れたままで表示されません。 #featured ul.ui-tabs-navのheightを300pxにして、overflow:hiddenに しています。 ６個目からもカーソルと連動して右のリストを表示して動かすにはどのように したらいいのでしょうか… また、右の動くカーソルを左の画像に重なるようにはできないでしょうか？ 背景のしろが目立ちすぎる気がして… 宜しくお願いいたします！！

    • ベストアンサー
    • CSS
  • jQuery UIを使用した画像スライダーについて

    お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 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
  • ToSelectorについて（ｊQuery）

    http://james.padolsey.com/demos/animateToSelector/ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_navigationmenu/animatetoselector.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB CSSをhtmlソース内ではなく、外部ファイルに変更すると FirefoxとChromeだけアニメーションが反応しなくなってしまいます。 おそらく、 $('#navigation a').animateToSelector({ selectors: ['#navigation a:hover'], properties: [ 'background-color', 'padding-left', 'color' ], events: ['mouseover', 'mouseout'] }); を外部CSS用に作り替えるのだと思うのですが、 http://www.re-creators.jp/blog/2008/10/01_114.html 等を参考にしたのですが、具体的な書き方がわかりません。 どなたかご教授願います。

  • マウスオーバした部分の画像を隣に拡大して表示させたいと思っています。

    マウスオーバした部分の画像を隣に拡大して表示させたいと思っています。 下記URLでやっている動作そのものなのですが、実際にこのソースを使ってみたところ、文字化けしてしまう上、うまく動作しません(Ajaxのソースのようです)。 できればJavascriptを使ってやりたいのですが。。。 初心者です。 よろしくお願いいたします。 参考：http://f32.aaa.livedoor.jp/~azusa/exp3.php?f=include/ajax/jquery_plugin_zoom/jqzoom.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

  • 2つのセレクトボックスで選択した組み合わせの結果

    社内で個人的に使うためのツールを Google Sites で作成中なのですが、 できれば、セレクトボックスの組み合わせの結果はテキストではなく、 条件に一致した結果でのフローをまとめた画像やGoogleスライドを指定して、 各条件ごとに振り分けて表示させたいと考えています。 ネットで色々と検索しながら試行錯誤した結果、 <textarea> に画像やスライドを反映するのは不可と判断しておりますが、 なにか別の要素を指定することで可能な場合や、 その他に可能な方法があればご教示いただけますと幸いです！ コードは下記です。 </head> <!-- javascriptファイル --> <script type="text/javascript"> function check(f){ var arr={ "A":{"aaa":"Aとaaaを選択しました","bbb":"Aとbbbを選択しました"} ,"B":{"aaa":"Bとaaaを選択しました","bbb":"Bとbbbを選択しました"} }; var select1=f.elements["select1"].value; var select2=f.elements["select2"].value; f.elements["C"].value=(arr[select1] && arr[select1][select2])?arr[select1][select2]:""; } </script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <body> <p class="title">該当する組み合わせを選択してください。</p> <form> <div class="cp_ipselect cp_sl01"> <select name="select1" onchange="check(this.form);"> <option value="">------ 選択肢①を選択してください ------</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div class="cp_ipselect2 cp_sl02"> <select name="select2" onchange="check(this.form);"> <option value="">------ 選択肢②を選択してください ------</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <p class="title2">選択肢①と②の組み合わせの結果</p> <!-- 下の textarea 箇所に各組み合わせごとにテキストではなく、画像やスライドを表示したいです --> <textarea name="C"></textarea> </form> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する