在"SELECT"标记中渲染"OPTION"的层次结构

Question

我的问题是HTML和CSS相关.我有一个层次结构类型结构,我想在列表中显示.层次结构包含国家,州和城市(深层次为三级).

我想在选择列表中显示列表,每个项目类型(国家,州,城市)必须是可选择的.这些项目应缩进为:

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 hacks的情况下在浏览器中实现一致的缩进.

Answer 1

SELECT元素的渲染很大程度上取决于浏览器,您对其演示的影响很小.有些浏览器显然允许你比其他浏览器更多的自定义,IE恰好允许很少(喘气,谁有thunk;)).如果你需要非常自定义的SELECT元素,你需要使用JavaScript或重新创建一些行为类似SELECT但由一堆DIVs和复选框或其他东西组成的东西.

说了这么多,我觉得你要寻找的是OPTGROUP小号:

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

每个浏览器都会以不同的方式显示它们,但它们会以某种方式以独特的方式显示.请注意,虽然在HTML4中正式使用,但您无法嵌套OPTGROUP.

Answer 2

deceze方式好多了,是我的第一个想法.作为替代方案,如果不起作用,您可以在标记值中使用不间断空格:

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

它远非漂亮,但如果optgroup没有,它可能对你有用.

Answer 3

只是为了访问者,我觉得我应该分享我设计的这个解决方案: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());
        }
   );

 }
);

这可以扩展到任何级别

Answer 4

尝试使用  

<select name="Something">
  <option>United States</option>
  <option>&#160;Hawaii</option>
  <option>&#160;&#160;Kauai</option>
  <option>&#160;Washington</option>
  <option>&#160;&#160;Seattle</option>
  <option>&#160;&#160;Chelan</option>
</select>