我的问题与 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 的情况下实现跨浏览器的一致缩进。
SELECTSELECTSELECTDIVOPTGROUP<select>
<optgroup label="xxx">
<option value="xxxx">xxxx</option>
....
</optgroup>
<optgroup label="yyy">
...
</optgroup>
</select>
每个浏览器都会以不同的方式显示它们，但它们将以一种独特的方式以某种方式显示。请注意，在 HTML4 中，你不能嵌套
OPTGROUPdeceze 方式要好得多，这是我的第一个想法。如果这不起作用，另一种方法是您可以在标签值中使用不间断空格：
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>
它远非漂亮，但如果 optgroup 不支持的话，它可能对你有用。
为了访客的利益，我觉得我应该分享我设计的这个解决方案：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());
}
);
}
);
这可以扩展到任何级别。
如果你想有空白的缩进空间（而不是
-$(document).ready(
function(){
var space = String.fromCharCode(8194)+String.fromCharCode(8194);
$('.level_2').each(
function(){
$(this).text(space+$(this).text());
}
);
$('.level_3').each(
function(){
$(this).text(space+space+$(this).text());
}
);
}
);
该版本是这里。
尝试使用
<select name="Something">
<option>United States</option>
<option> Hawaii</option>
<option>  Kauai</option>
<option> Washington</option>
<option>  Seattle</option>
<option>  Chelan</option>
</select>这种分组方法所产生的问题不是比它解决的问题还多吗？作为用户，我应该选择哪一个？选择比国家/地区更具体的内容有什么好处吗？
如果问题是您只有一个数据库字段来存储它们，为什么不使用三个单独的选择框（使 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>
我能够使用 NO-BREAK SPACE unicode 字符来完成此操作。 http://www.fileformat.info/info/unicode/char/00a0/index.htm
将该页面中的字符复制粘贴到代码中，瞧： https://jsfiddle.net/fwillerup/r9ch988h/
（
前置不间断空格（ ）对我不起作用。
我添加了以下内容：
String.fromCharCode(8194);我喜欢上面@codingbiz建议的解决方案： https://stackoverflow.com/a/11600605/6730120
我稍微修改了jquery代码，使其更通用。 因此，不要在脚本中手动定义每个可能的级别，而是使用数据级别属性来定义层次结构中的位置。 注意：您有责任输入有意义的值，因此层次结构才有意义。
检查片段。
$('select.hierarchy').each(function() {
$(this).children('option').each(function(){
attr = $(this).attr('data-level');
multiplier = 1; // increase the value, if you want larger indents, i.e. 3
indent = (typeof attr !== 'undefined' && attr !== false) ? parseInt(attr) * multiplier : 0;
$(this).html(" ".repeat(indent) + $(this).text());
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="hierarchy" id="select" name="select">
<option value="NULL"></option>
<option value="1" data-level="0">Option 1</option>
<option value="2" data-level="1">Option 1.1</option>
<option value="3" data-level="2">Option 1.1.1</option>
<option value="4" data-level="1">Option 1.2</option>
<option value="5" data-level="0">Option 2</option>
<option value="6" data-level="1">Option 2.1</option>
<option value="7" data-level="1">Option 2.2</option>
<option value="8" data-level="2">Option 2.2.1</option>
</select>