在“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 hack 的情况下实现跨浏览器的一致缩进。

Answer 1

SELECT 元素的呈现很大程度上取决于浏览器，您对它们的呈现几乎没有影响。某些浏览器显然允许您比其他浏览器进行更多的自定义，而 IE 恰好允许的很少（gasp，谁会有 thunk ;)）。如果您需要非常自定义的 SELECT 元素，则需要使用 JavaScript 或重新创建行为类似于 SELECT 但由一堆 DIVs 和复选框或其他扩展组成的东西。

话虽如此，我想你要找的是OPTGROUPs：

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

每个浏览器都会以不同的方式显示它们，但它们会以一种或另一种方式以独特的方式显示。请注意，虽然在 HTML4 中，您不能嵌套 OPTGROUPs。

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>

Answer 5

这种分组方法不是带来的问题多于解决的问题吗？作为用户，我应该选择哪一个？选择比国家更具体的东西有什么好处吗？

如果问题是您只有一个数据库字段可以存储它们，为什么不使用三个单独的选择框（使 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>

Answer 6

我能够使用 NO-BREAK SPACE unicode 字符来完成此操作。 http://www.fileformat.info/info/unicode/char/00a0/index.htm

将该页面中的字符复制粘贴到代码中，然后瞧： https://jsfiddle.net/fwillerup/r9ch988h/

（  对我不起作用，因为我使用了一个用于花哨的选择框的库，可以逐字注入它们。）

Answer 7

前置不间断空格 (&nbsp) 对我不起作用。

我添加了以下内容：

String.fromCharCode(8194);