Rendering di una gerarchia di "OPTION" in un tag "SELECT"

Question

Il mio problema è legato all'HTML e ai CSS. Ho una struttura di tipo gerarchia che voglio visualizzare all'interno di una lista. La gerarchia contiene paesi, stati e città (è profonda tre livelli).

Desidero visualizzare l'elenco all'interno di un elenco di selezione, ogni tipo di elemento (Paese, Stato, Città) deve essere selezionabile. Gli articoli dovrebbero apparire rientrati come:

United States 
- Hawaii 
-- Kauai 
- Washington 
-- Seattle 
-- Chelan 

Il problema è con il rientro. Sto provando a usare il margine sinistro o il padding sinistro per indentare i tag, che appaiono corretti in FireFox ma non in IE7. Questo è un esempio della lista di selezione generato:

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

che voglio raggiungere l'indentazione coerente in tutti i browser senza utilizzare hack CSS.

Answer 1

inganno modo è molto meglio ed è stata la mia prima idea. In alternativa, se questo non funziona è che si può utilizzare spazi non-rottura del valore tag:

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

E 'lontano dal grazioso ma potrebbe funzionare per voi se l'optgroup non lo fa.

Answer 2

Il rendering degli elementi SELECT dipende in gran parte dal browser, non si ha molta influenza sulla presentazione. Alcuni browser ti consentono ovviamente una maggiore personalizzazione rispetto ad altri, IE sembra consentire pochissimo (gasp, che avrebbe thunk;)). Se hai bisogno di elementi personalizzati SELECT, devi utilizzare JavaScript o ricreare qualcosa che si comporta come un SELECT ma è composto da un gruppo di DIV se caselle di controllo o qualcosa del genere.

Detto questo, penso che quello che state cercando sono OPTGROUPs:

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

Ogni browser visualizzerà in modo diverso, ma continuerà a essere visualizzato in modo distintivo in un modo o nell'altro. Nota però che ufficialmente in HTML4 non puoi annidare OPTGROUP s.

Answer 3

Non è questo metodo di raggruppamento che crea più problemi di quanti ne risolva? Come utente, quale di questi dovrei scegliere? C'è qualche vantaggio nello scegliere qualcosa di più specifico del Paese?

Se il problema è che si dispone solo di un campo di database in cui archiviarli, perché non hanno tre caselle di selezione separate (che rendono 2 o 3 facoltativi) e memorizzano solo le più specifiche?:

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

Solo per il gusto dei visitatori, sento che dovrei condividere questa soluzione ho ideato: http://jsfiddle.net/n9qpN/

Decorare le opzioni con la classe di livello

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

Ora possiamo usare jQuery per riformattare il contenuto dell'elemento select

$(document).ready(
function(){ 
    $('.level_2').each(
     function(){ 
      $(this).text('----'+$(this).text()); 
     } 
    ); 

    $('.level_3').each(
     function(){ 
      $(this).text('---------'+$(this).text()); 
     } 
    ); 

} 
); 

Questo può essere esteso a qualsiasi livello

Answer 5

Provare a utilizzare & # 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>

Answer 6

sono stato in grado di raggiungere questo obiettivo utilizzando il carattere SPACE unicode no-break. http://www.fileformat.info/info/unicode/char/00a0/index.htm

copia-incolla il personaggio da quella pagina in codice e voilà: (.   non ha funzionato per me, perché ero utilizzando una libreria per le caselle di selezione di fantasia che li avrebbe iniettare testualmente) https://jsfiddle.net/fwillerup/r9ch988h/