web-dev-qa-db-ja.com

「SELECT」タグ内の「OPTION」の階層のレンダリング

私の問題はHTMLとCSSに関連しています。リスト内に表示したい階層型構造があります。階層には、国、州、都市が含まれます（3レベルの深さ）。

選択リスト内にリストを表示したいのですが、各項目タイプ（国、州、都市）が選択可能でなければなりません。アイテムは次のように字下げして表示されます。

United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan

問題はインデントにあります。タグをインデントするためにmargin-leftまたはpadding-leftを使用しようとしています。FireFoxでは正しく表示されますが、IE7では正しく表示されません。これは、生成された選択リストの例です。

<select name="Something">
<option style="padding-left: 0">United States</option>
<option style="padding-left: 20px">Hawaii</option>
<option style="padding-left: 40px">Kauai</option>
<option style="padding-left: 20px">Washington</option>
<option style="padding-left: 40px">Seattle</option>
<option style="padding-left: 40px">Chelan</option>
</select>

CSSハックを使用せずに、ブラウザー間で一貫したインデントを実現したいと考えています。

htmlcsshtml-select
18
Salman A

落ち着く方法ははるかに優れており、私の最初のアイデアでした。これが機能しない場合の代替策として、タグ値に改行しないスペースを使用できます。

<select>
    <option>select me</option>
    <option>&nbsp;me indented</option>
    <option>&nbsp;&nbsp;even more indentation</option>
</select>

それはきれいにはほど遠いですが、optgroupが機能しない場合はうまくいくかもしれません。

20
MacAnthony

SELECT要素のレンダリングは、主にブラウザ次第であり、それらのプレゼンテーションへの影響はほとんどありません。一部のブラウザーでは、他のブラウザーよりも多くのカスタマイズが可能です。IEでごくわずかしか許可されません（gasp、だれがサンクを使用していたか;））。非常にカスタムのSELECT要素が必要な場合は、JavaScriptを使用するか、SELECTのように動作するがDIVsとチェックボックスの束で構成されているものを再作成する必要がありますまたはそれに拡張する何か。

そうは言っても、あなたが探しているのは OPTGROUPs ：

<select>
  <optgroup label="xxx">
    <option value="xxxx">xxxx</option>
    ....
  </optgroup>
  <optgroup label="yyy">
    ...
  </optgroup>
</select>

ブラウザによって表示方法は異なりますが、いずれかの方法で独特の方法で表示されます。ただし、HTML4では公式にOPTGROUPsをネストすることはできません。

43
deceze

訪問者のために、私が考案したこのソリューションを共有する必要があると思います。 http://jsfiddle.net/n9qpN/

オプションをレベルクラスで飾ります

<select name="hierarchiacal">
<option class="level_1">United States</option>
    <option class="level_2">Hawaii</option>
        <option class="level_3">Kauai</option>
    <option class="level_2">Washington</option>
        <option class="level_3">Seattle</option>
        <option class="level_3">Chelan</option>
</select>

JQueryを使用してselect要素のコンテンツを再フォーマットできるようになりました

$(document).ready(
function(){
   $('.level_2').each(
        function(){
            $(this).text('----'+$(this).text());
        }
   );

   $('.level_3').each(
        function(){
            $(this).text('---------'+$(this).text());
        }
   );

 }
);

これは任意のレベルに拡張できます

10
codingbiz

このグループ化の方法は、解決する以上の問題を引き起こしていませんか？ユーザーとして、どちらを選ぶべきですか？国よりも具体的なものを選択するメリットはありますか？

それらを格納するデータベースフィールドが1つしかないという問題がある場合は、3つの個別の選択ボックス（2つまたは3つをオプションにする）を用意して、最も具体的なものだけを格納しないでください。

<select name="country">
    <option>Choose a country</option>
    <option>United States</option>
</select>
<select name="state">
    <option>Choose a state</option>
    <option>Hawaii</option>
</select>
<select name="city">
    <option>Choose a city</option>
    <option>Kauai</option>
</select>
2
Simon Scarfe

NO-BREAK SPACEユニコード文字を使用してこれを達成できました。 http://www.fileformat.info/info/unicode/char/00a0/index.htm

そのページの文字をコードと出来上がりにコピーして貼り付けます： https://jsfiddle.net/fwillerup/r9ch988h/

（&nbsp;は、私がそれらを逐語的に挿入するファンシーなセレクトボックスのライブラリを使用していたため、機能しませんでした。）

1
fredw

改行しないスペース（＆nbsp）を追加しても機能しませんでした。

私は以下を追加しました：

String.fromCharCode(8194);

1
Skywalker