[html/css] Selezionare un OPTGROUP da una lista

Nightingale · 11-06-2007, 15:41

Salve a tutti,

ho l'impressione di star perdendo tempo per una cosa stupida. Pertanto avrei piacere nell'avere un vostro parere.
Ho la necessità di creare una lista di valori fra cui scegliere, nella quale esistono dei padri e dei filgi.

- Auto Tedesche
* opel
* bmw
- Auto Italiane
* Fiat
* Alfa Romeo

Cercando un po', avevo trovato l'opzione OPTGROUP che permette di raggruppare un insieme di opzioni. Il problema è che io vorrei fosse selezionabile anche il "gruppo principale", come Auto Tedesche.
Avete qualche consiglio? Grazie mille... Sto ravanando nel web, ma non riesco a trovare qualcosa di simile...

andbin · 11-06-2007, 16:04

Quote:

Originariamente inviato da Nightingale

Cercando un po', avevo trovato l'opzione OPTGROUP che permette di raggruppare un insieme di opzioni. Il problema è che io vorrei fosse selezionabile anche il "gruppo principale", come Auto Tedesche.
Avete qualche consiglio? Grazie mille... Sto ravanando nel web, ma non riesco a trovare qualcosa di simile...

Puoi usare solo <option> opportunamente stilizzati con CSS in modo tale da evidenziare la indentazione e i vari livelli.
Ecco un esempio che ho scritto per prova:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova</title>
<style type="text/css">
<!--
option.l1 { font-weight: bold; }
option.l2 { margin-left: 1.5em; }
-->
</style>
</head>
<body>

<select>
  <option class="l1">Auto Tedesche</option>
  <option class="l2">Opel</option>
  <option class="l2">BMW</option>
  <option class="l1">Auto Italiane</option>
  <option class="l2">Fiat</option>
  <option class="l2">Alfa Romeo</option>
</select>

</body>
</html>

Nightingale · 11-06-2007, 16:23

Quote:

Originariamente inviato da andbin

Puoi usare solo <option> opportunamente stilizzati con CSS in modo tale da evidenziare la indentazione e i vari livelli.
Ecco un esempio che ho scritto per prova:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova</title>
<style type="text/css">
<!--
option.l1 { font-weight: bold; }
option.l2 { margin-left: 1.5em; }
-->
</style>
</head>
<body>

<select>
  <option class="l1">Auto Tedesche</option>
  <option class="l2">Opel</option>
  <option class="l2">BMW</option>
  <option class="l1">Auto Italiane</option>
  <option class="l2">Fiat</option>
  <option class="l2">Alfa Romeo</option>
</select>

</body>
</html>

Ok... Grazie mille per la dritta. Credo proprio che farò così!

andbin · 11-06-2007, 16:32

azz .... i soliti problemi di compatibilità: come ho fatto la stilizzazione funziona solo con Firefox/Netscape. Non con IE/Opera.
Se vuoi che i sotto-elementi siano indentati mi sa che è meglio se metti dei bei  

Nightingale · 11-06-2007, 16:33

Ed infatti l'ho appena fatto. Perfetto! Grazie ancora...

Potrei perfezionare solo una cosa... io posso avere più livelli. In teoria infiniti, ma all'atto pratico so che nell'applicativo non andremo oltre i 4-5.
Come ho fatto ora, mi indenta fino al livello 5, il massimo che ho previsto, e mi scrive in bold quello principale, il primo livello. In realtà vorrei provare a colorare in bold tutti i livelli che hanno un figlio.

Nightingale · 11-06-2007, 16:37

Quote:

Originariamente inviato da andbin

azz .... i soliti problemi di compatibilità: come ho fatto la stilizzazione funziona solo con Firefox/Netscape. Non con IE/Opera.
Se vuoi che i sotto-elementi siano indentati mi sa che è meglio se metti dei bei  

Vero... ho appena provato in IE e non va...

Come faccio però a mettere N   per livello?

andbin · 11-06-2007, 16:48

Quote:

Originariamente inviato da Nightingale

In realtà vorrei provare a colorare in bold tutti i livelli che hanno un figlio.

Non sembra così facile .... lo stile "bold" funziona solo con Firefox. Lo stile "background" invece funziona con Firefox e IE.

Quote:

Originariamente inviato da Nightingale

Come faccio però a mettere N   per livello?

Ne metti 3 o 4 in sequenza.

11-06-2007, 15:41	#1
Nightingale Senior Member Iscritto dal: May 2002 Città: Firenze Messaggi: 3671	[html/css] Selezionare un OPTGROUP da una lista Salve a tutti, ho l'impressione di star perdendo tempo per una cosa stupida. Pertanto avrei piacere nell'avere un vostro parere. Ho la necessità di creare una lista di valori fra cui scegliere, nella quale esistono dei padri e dei filgi. - Auto Tedesche * opel * bmw - Auto Italiane * Fiat * Alfa Romeo Cercando un po', avevo trovato l'opzione OPTGROUP che permette di raggruppare un insieme di opzioni. Il problema è che io vorrei fosse selezionabile anche il "gruppo principale", come Auto Tedesche. Avete qualche consiglio? Grazie mille... Sto ravanando nel web, ma non riesco a trovare qualcosa di simile... __________________ XBOX·Series X \|\| Gamer.TAG: iTz Tyl3rDurd3n \|\| STEAM ID: proj3ctmayh3m \|\| BTag: TylerDurden#1150 7950X3D \|\| 32GB DDR5 6000MHz CL30 \|\| 4080 SUPER FE

11-06-2007, 16:32	#4
andbin Senior Member Iscritto dal: Nov 2005 Messaggi: 5206	azz .... i soliti problemi di compatibilità: come ho fatto la stilizzazione funziona solo con Firefox/Netscape. Non con IE/Opera. Se vuoi che i sotto-elementi siano indentati mi sa che è meglio se metti dei bei   __________________ Andrea, Senior Java developer – SCJP 5 (91%) • SCWCD 5 (94%) Java Versions Cheat Sheet

11-06-2007, 16:33	#5
Nightingale Senior Member Iscritto dal: May 2002 Città: Firenze Messaggi: 3671	Ed infatti l'ho appena fatto. Perfetto! Grazie ancora... Potrei perfezionare solo una cosa... io posso avere più livelli. In teoria infiniti, ma all'atto pratico so che nell'applicativo non andremo oltre i 4-5. Come ho fatto ora, mi indenta fino al livello 5, il massimo che ho previsto, e mi scrive in bold quello principale, il primo livello. In realtà vorrei provare a colorare in bold tutti i livelli che hanno un figlio. __________________ XBOX·Series X \|\| Gamer.TAG: iTz Tyl3rDurd3n \|\| STEAM ID: proj3ctmayh3m \|\| BTag: TylerDurden#1150 7950X3D \|\| 32GB DDR5 6000MHz CL30 \|\| 4080 SUPER FE

Strumenti
Mostra una versione stampabile Invia questa pagina per email