web-dev-qa-db-ja.com

複数行オプションを使用して<select>を作成するにはどうすればよいですか?

複数行の選択コントロールを作成する必要があります。全ての <option>は、テキストが300pxより広い場合(たとえば)、前述の制限を超えないようにするために必要な行を持つようになります。

これらの画像はそれ自身を物語っています:

http://home.comcast.net/~ephmynus/select1.jpghttp://home.comcast.net/~ephmynus/select2.jpg


まず最初にこれを試しましたが、うまくいきません。

<html>
    <head>
        <style>
            option{
                width: 100px; 
                white-space: wrap;
            }

        </style>
    </head>
    <body>
        <select>
            <option>I'm short</option>
            <option>I'm medium text</option>
            <option>I'm a very very very very very very very very very long text</option>
        </select>   
    </body>
</html>

bootstrapフレームワークを使用しており、ドロップダウンコントロールを使用して結果を取得できると考えました。max-width CSSプロパティを設定しようとしましたが、機能しません。 。

どうすればこれを達成できますか?

20
harrison4

<option>タグのスタイル機能は制限されており、フォーマットはサポートされていません。

JavaScriptベースの代替 を使用できます。周りを見渡せばたくさんあります。