Come funziona il codice?
Si parte da un Ul
con un determinato id. L'ul deve avere la forma:
<ul id="...">
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a class="active" href="...">...</a></li>
...
</ul>
Se una delle Li
ha una classe active
, quel li trasformato in option sarà selezionato. Nell'esempio qui sotto la Francia pur non essendo la prima delle option compare come selezionata.
Si include il JavaScript, il CSS e si richiama la funzione con i parametri richiesti.
$(window).on("load resize", function() {
ulToSelect($("ul#id"), 767);
});
Dove ul#id
si riferisce all'ul con un determinato id e 767
è il valore minimo per il quale la lista viene convertita in select. Questi due parametri possono essere modificati in base alle vostre esigenze.
Qui sotto trovate un esempio dell'utilizzo di questa soluzione:
In questo esempio il valore da 767 è stato portato a 1920 cosi da essere visto in azione anche su schermi grandi.
Questa implementazione supporta la navigazione nel search con i tasti di direzione su e giù. Si può selezionare un elemento con il bottone enter. Si può notare la modifica del url con un hash se si seleziona uno qualsiasi dei elementi della lista. Il primo ul ha sull'li corrispondente alla Francia la classe active
che fa si che quel li trasformato in option sia selezionato.
EUROPE States
- Belgium
- Greece
- Lithuania
- Portugal
- Bulgaria
- Spain
- Luxembourg
- Romania
- Czech Republic
- France
- Hungary
- Slovenia
- Denmark
- Croatia
- Malta
- Slovakia
- Germany
- Italy
- Netherlands
- Finland
- Estonia
- Cyprus
- Austria
- Sweden
- Ireland
- Latvia
- Poland
- United Kingdom
USA States
- Alabama
- Alaska
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- Florida
- Georgia
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Washington
- West Virginia
- Wisconsin
- Wyoming
Dove scaricare il codice ul to select?
Vi rimando a questa pagina GitHub per il codice che potrete liberamente scaricare.