我的問題是HTML和CSS相關的。我有一個層次類型的結構，我想在列表中顯示。層次結構包含國家、州和城市(有三層)。
我想在選擇列表中顯示列表，每個項目類型(國家，州，城市)必須是可選的。這些項目應縮進顯示，如下所示:
United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan問題在于壓痕。我嘗試使用左邊空白或左邊填充來縮進標簽，這在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的情況下實現跨瀏覽器的一致縮進。
# # #選擇元素的呈現很大程度上取決于瀏覽器，您對它們的呈現幾乎沒有影響。有些瀏覽器顯然比其他瀏覽器允許更多的定制，IE只允許很少的定制(喘息，誰會想到；)).如果您需要非常定制的SELECT元素，您將需要使用JavaScript或重新創建類似SELECT的東西，但它是由一堆div和復選框或類似的東西組成的。
話雖如此，我認為你要找的是OPTGROUPs:
<select>
<optgroup label="xxx">
<option value="xxxx">xxxx</option>
....
</optgroup>
<optgroup label="yyy">
...
</optgroup>
</select>每個瀏覽器都會以不同的方式顯示它們，但是它們會以不同的方式顯示。請注意，在HTML4中，你不能嵌套OPTGROUPs。
###deceze way好得多，是我的第一個想法。如果這不起作用，另一種方法是在標記值中使用不間斷空格:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>這一點也不漂亮，但如果optgroup不這么做，它可能對你有用。
# # #只是為了游客，我覺得我應該分享我設計的這個解決方案:http://jsfiddle.net/n9qpN/
用level類修飾選項
<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());
}
);
}
);這可以擴展到任何級別
# # #嘗試使用& amp#160;
<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># # #我可以使用不換行空格unicode字符來完成這個任務。http://www.fileformat.info/info/unicode/char/00a0/index.htm
將頁面中的字符復制粘貼到代碼中，瞧: https://jsfiddle.net/fwillerup/r9ch988h/
(& ampnbsp對我來說沒有用，因為我用了一個庫來存放花哨的選擇框，這些選擇框會一字不差地注入它們。)
# # #添加不間斷空格(& ampnbsp)對我不起作用。
我預先考慮了以下內容:
string . from charcode(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>