23

私の問題は HTML と CSS 関連です。リスト内に表示したい階層型構造があります。階層には、Countries、States、および Cities が含まれます (深さは 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 ハックを使用せずに、ブラウザー間で一貫したインデントを実現したいと考えています。

4

7 に答える 7

48

要素のレンダリングSELECTは主にブラウザー次第であり、それらの表示にはほとんど影響を与えません。一部のブラウザでは明らかに他のブラウザよりも多くのカスタマイズが可能ですが、IE ではたまたまほとんど許可されていません (あえぎ、サンクした人は ;))。非常にカスタムSELECTな要素が必要な場合は、JavaScript を使用するか、 のように動作するものを再作成する必要がありSELECTますDIV。

そうは言っても、あなたが探しているのはOPTGROUPsだと思います：

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

ブラウザごとに異なる方法で表示されますが、何らかの方法で独特の方法で表示されます。ただし、公式には HTML4 ではOPTGROUPs をネストできないことに注意してください。

于 2009-07-18T05:38:55.340 に答える
23

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

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

きれいにはほど遠いですが、optgroupが機能しない場合は機能する可能性があります。

于 2009-07-18T05:59:16.563 に答える
13

訪問者のためだけに、私が考案したこのソリューションを共有する必要があると感じています：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());
        }
   );

 }
);

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

于 2012-07-22T13:20:18.313 に答える
2

このグループ化の方法は、解決するよりも多くの問題を生み出していませんか? ユーザーとして、私はそれらのどれを選択することになっていますか? 国より具体的なものを選択する利点はありますか?

それらを格納するデータベース フィールドが 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>
于 2009-07-18T11:19:52.720 に答える