Html 在“SELECT”标签中呈现“OPTION”的层次结构
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1146789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering a hierarchy of "OPTION"s in a "SELECT" tag
提问by Salman A
My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three levels deep).
我的问题是 HTML 和 CSS 相关的。我有一个层次结构类型结构，我想在列表中显示。层次结构包含国家、州和城市（它是三层深）。
I want to display the list inside a select list, each item type (Country, State, City) must be selectable. The items should appear indented as:
我想在选择列表中显示列表，每个项目类型（国家、州、城市）必须是可选的。这些项目应缩进为：
United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan
The problem is with the indentation. I am trying to use either margin-left or padding-left to indent the tags, which appear correct in FireFox but not in IE7. This is an example of the generated select list:
问题在于缩进。我正在尝试使用 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>
I want to achieve consistent indentation across browsers without using CSS hacks.
我想在不使用 CSS hacks 的情况下实现跨浏览器的一致缩进。
回答by deceze
The rendering of SELECTelements is largely up to the browser, you have very little influence over their presentation. Some browsers obviously allow you more customization than others, IE happens to allow very little (gasp, who'd have thunk ;)). If you need very custom SELECTelements, you'll need to employ JavaScript or re-create something that behaves like a SELECTbut is made of a bunch of DIVs and checkboxes or something to that extend.
SELECT元素的呈现很大程度上取决于浏览器，您对它们的呈现几乎没有影响。某些浏览器显然允许您比其他浏览器进行更多的自定义，而 IE 恰好允许很少（喘气，谁会发出thunk ;)）。如果您需要非常自定义的SELECT元素，您将需要使用 JavaScript 或重新创建一些行为类似于 aSELECT但由一堆DIVs 和复选框或扩展的东西组成的东西。
Having said that, I think what you're looking for are OPTGROUPs:
话虽如此，我认为您正在寻找的是OPTGROUPs：
<select>
<optgroup label="xxx">
<option value="xxxx">xxxx</option>
....
</optgroup>
<optgroup label="yyy">
...
</optgroup>
</select>
Every browser will display them differently, but they'll be displayed in a distinctive fashion in one way or another. Note though that officially in HTML4 you can't nest OPTGROUPs.
每个浏览器都会以不同的方式显示它们，但它们会以一种或另一种方式以独特的方式显示。请注意，尽管正式在 HTML4 中您不能嵌套OPTGROUPs。
回答by MacAnthony
deceze way is much better and was my first idea. As an alternative if that doesn't work is that you can use non-breaking spaces in the tag value:
deceze方式要好得多，这是我的第一个想法。如果这不起作用，另一种方法是您可以在标签值中使用不间断空格：
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>
It's far from pretty but it might work for you if the optgroup doesn't.
它远非漂亮，但如果 optgroup 没有，它可能对你有用。
回答by codingbiz
Just for the sake of visitors, I feel I should share this solution I devised: http://jsfiddle.net/n9qpN/
只是为了访问者，我觉得我应该分享我设计的这个解决方案：http: //jsfiddle.net/n9qpN/
Decorate the options with the level class
用级别类装饰选项
<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>
We can now use jQuery to reformat the content of the selectelement
我们现在可以使用 jQuery 重新格式化select元素的内容
$(document).ready(
function(){
$('.level_2').each(
function(){
$(this).text('----'+$(this).text());
}
);
$('.level_3').each(
function(){
$(this).text('---------'+$(this).text());
}
);
}
);
This can be extended to any level
这可以扩展到任何级别
回答by Igor Krupitsky
Try using  
尝试使用
<select name="Something">
<option>United States</option>
<option> Hawaii</option>
<option>  Kauai</option>
<option> Washington</option>
<option>  Seattle</option>
<option>  Chelan</option>
</select>回答by Simon Scarfe
Isn't this method of grouping creating more problems than it solves? As a user, which of those am I supposed to choose? Is there any benefit to choosing something more specific than country?
这种分组方法不是造成的问题多于解决的问题吗？作为用户，我应该选择哪一个？选择比国家更具体的东西有什么好处吗？
If the issue is that you only have one database field to store them in, why not have three separate select boxes (making 2 or 3 optional) and just store the most specific?:
如果问题是您只有一个数据库字段来存储它们，为什么不使用三个单独的选择框（使 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>
回答by fredw
I was able to accomplish this using the NO-BREAK SPACE unicode character. http://www.fileformat.info/info/unicode/char/00a0/index.htm
我能够使用 NO-BREAK SPACE unicode 字符完成此操作。http://www.fileformat.info/info/unicode/char/00a0/index.htm
Copy-paste the character from that page into code and voila: https://jsfiddle.net/fwillerup/r9ch988h/
将该页面中的字符复制粘贴到代码中，瞧：https: //jsfiddle.net/fwillerup/r9ch988h/
( didn't work for me because I was using a library for fancy select boxes that would inject them verbatim.)
（ 对我不起作用，因为我正在使用一个库来制作精美的选择框，这些选择框会逐字注入它们。）
回答by Skywalker
Prepending Non breaking space ( ) did not work for me.
前置非中断空间（ ）对我不起作用。
I prepended the following:
我预先准备了以下内容：
String.fromCharCode(8194);
String.fromCharCode(8194);
