1. 首頁
  2. 問答
  3. 在「SELECT」標記中呈現「OPTION」的層次結構

在「SELECT」標記中呈現「OPTION」的層次結構

2009-07-18 83 views
16

我的問題是與HTML和CSS相關的問題。我有一個層次結構類型的結構，我想在列表中顯示。層次結構包含國家，國家和城市（深度分爲三個層次）。在「SELECT」標記中呈現「OPTION」的層次結構

我想在選擇列表中顯示列表，每個項目類型（國家，州，城市）必須是可選的。這些項目應顯示爲縮進爲：

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黑客。

來源

2009-07-18 Salman A

+0

另請參閱http://stackoverflow.com/questions/1037732/nesting-optgroups-in-a-dropdownlist-select – 2015-03-13 17:48:24

回答

18

欺騙的方式好多了，是我的第一個想法。如果這不工作的另一種方法是，你可以在標籤值中使用非打破空間：

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

這是遠離漂亮，但如果OPTGROUP沒有它可能爲你工作。

來源

2009-07-18 05:59:16 MacAnthony

+0

呃，我無法讓實體正常工作  – MacAnthony 2009-07-18 06:00:39

+1

恐怕這確實是最可靠的解決方案。 – Ms2ger 2009-07-18 09:59:38

+0

我也同意。不間斷空間的工作，所以破折號。 – 2009-07-20 05:50:21

37

SELECT元素的渲染在很大程度上取決於瀏覽器，您對其演示文稿的影響很小。一些瀏覽器顯然允許你比其他瀏覽器更多的自定義，IE恰好允許很少（gasp，誰會有thunk;））。如果您需要非常自定義的SELECT元素，則需要使用JavaScript或重新創建類似於SELECT的東西，但是由一堆DIV和複選框或其他類似的東西組成。

說了這麼多，我覺得你要尋找的是OPTGROUPs：

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

每一個瀏覽器將以不同的方式顯示出來，但他們會以這種或那種方式顯示在一個與衆不同的時尚。請注意，雖然在HTML4中正式使用，但不能嵌套OPTGROUP。

來源

2009-07-18 05:38:55 deceze

+1

作爲回退，您可以像在示例中一樣顯示它們，使用破折號縮進它們。 – deceze 2009-07-18 05:53:25

+1

@deceze從問題中引用：「每個項目類型（國家，州，市）必須可選」。我懷疑optgroup是可選的。 – 2009-07-18 07:25:55

+0

的確如此。然後，他需要以不同的方式對他們進行分組，並使用組標籤作爲標籤，或者簡單地跳過我的答案的第二部分。 – deceze 2009-07-18 11:50:20

2

是不是這種分組方法會產生比解決問題更多的問題？作爲用戶，我應該選擇哪些？選擇比國家更具體的東西有沒有好處？

如果問題是您只有一個數據庫字段來存儲它們，爲什麼不能有三個單獨的選擇框（使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>

來源

2009-07-18 11:19:52

+0

我必須做一個級聯的「onchange = populate_next_select（）;」以此目的。此外，我想要的是在一個galance中呈現整個列表。 – 2009-07-20 05:53:02

+0

@Salman A：爲什麼這樣？無論如何，你完全填充一個選擇框，爲什麼不完全填充所有3？然而，你關於一次提供整個列表的觀點是公平的。 – 2009-07-20 08:21:07

+5

>>「爲什麼這樣？」客戶這麼說:( – 2009-07-22 10:04:19

9

只是爲了遊客着想，我覺得我應該分享這種解決方案我設計：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()); 
     } 
    ); 

} 
);

這可以擴展到任何級別

來源

2012-07-22 13:20:18 codingbiz

2

嘗試使用&＃160;

<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>

來源

2016-04-06 06:25:57

相關問題

 相關問題