trasformare lista con sotto lista in una select (jquery)

[-AA-]

ho una LISTA (LI) strutturati in questo modo

--------------------------------------------------------------------

<li data-id='40'>
	<div class='region-info' data-id='40'>ABRUZZO</div>
		<ul>
		<li data-id='73'><div class='region-info' data-id='73'>L'AQUILA</div>
		<li data-id='92'><div class='region-info' data-id='92'>PESCARA</div>
		<li data-id='106'><div class='region-info' data-id='106'>TERAMO</div>
		[/list]

--------------------------------------------------------------------
ovviamente ho anche le altre province fatte nello stesso modo

so che con jquery si può trasformare una lista in una SELECT
(vedi link http://www.mynamespace.it/wp-content...ect/index.html)

il mio prob è il saperlo applicare alla mia tipologia di lista perchè dovrei fare 1 select con tutte le regioni e di conseguenza avere la seconda select che si popola delle relative province

[cavicchiandrea]

- Ma esiste un tag data-id?
- E cosa sarebbe?
- E può essere numerico?
- E quale sarebbe il problema hai già tutto?

[-AA-]

Ciao cavicchiandrea
Grazie per l'attenzione

- il tag data-id non esiste ma mi servirà per fare altre cose

il "problema" è che vorrei ottenere 2 select
la prima con tutte le regioni
la seconda (dopo la selezione della prima) con le sue province

cercando in rete ho per cui trovato l'esempio indicato nel link
(http://www.mynamespace.it/wp-conten...lect/index.html)
ma ovviamente l'esempio si basa su una "lista semplice" al che vorrei capire se posso adattare quel metodo alla mia di liste per ottenere quanto sopra indicato.

[SkyBlue]

Bè allora devi dare alle regioni un ID identificativo solo per loro... e alle loro città un id identificativo per quella regione-città...

[-AA-]

eccomi ancora... a dire il vero creare la select delle regioni era abbastanza semplice...

mi è bastato attribuire il tutto al DIV che contiene il nome della regione

$('#links div').each(function() {

dalla lista

<li data-id='40'>
	<div class='region-info' data-id='40'>ABRUZZO</div>
		<ul>
		<li data-id='73'><div class='region-info' data-id='73'>L'AQUILA</div>
		<li data-id='92'><div class='region-info' data-id='92'>PESCARA</div>
		<li data-id='106'><div class='region-info' data-id='106'>TERAMO</div>
		[/list]

ora viene il "bello".. che non sono io... creo la select delle regioni, come posso alla selezione di una data regione far apparire la select con le relative province?...uhmmm mi sa che quì diventa un pochino + complicato

[-AA-]

Ciao SkyBlu leggo ora la tua risposta, con quanto fatto fino ad ora non necessito di identificare le regioni...

es:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#switch').click(function() {
				var select = $('<select />').change(function() {
					if(this.selectedIndex > 0) location.href = $(this).val();
				}).append('<option value="">Selezionare</option>').insertBefore('#links');
				
				$('#links div').each(function() {
					select.append('<option value="' + $(this).attr('href') + '">' + $(this).html() + '</option>');
				});
				
				$('#links, #switch').hide();
			});
		});
    </script>
	<button id="switch">Trasformazione!</button>
	

<ul id="links">
<li data-id='40'>
<div class='region-info' data-id='40'>ABRUZZO</div>
	<ul>
	<li data-id='73'><div class='region-info' data-id='73'>L'AQUILA</div>
	<li data-id='92'><div class='region-info' data-id='92'>PESCARA</div>
	<li data-id='106'><div class='region-info' data-id='106'>TERAMO</div>
	[/list]

con quanto scritto sopra ottengo la select con solo le regioni...

l'identificativo per le province, si potrei metterlo però so che con jquery c'è modo di leggere parecchio nel codice per cui, anche se non so come fare, mi basterebbe prendere il relativo UL della regione selezionata per fare la seconda select...

[SkyBlue]

Crea un oggetto, dove alla regione X corrispondono la città Y-Z , in modo tale che all'onchange o onselect del select di regione il JS ti stampi in un nuovo select le città per quelle regioni..

Ecco un esempio :

<script type="text/javascript">
var Regioni = new Object();
Regioni['Abruzzo'] = [{text:"Aquila", value:"Aquila"},{text:"Pescara", value:"Pescara"},{text:"Teramo", value:"Teramo"}];

alert(Regioni['Abruzzo'][0]['text']);
</script>

[-AA-]

Ok ho risistemato quanto edtto prima

    <script type="text/javascript">
		$(document).ready(function() {
			$('#switch').click(function() {
				var select = $('<select />').change(function() {
					if(this.selectedIndex > 0) location.href = $(this).val();
				}).append('<option value="">Selezionare</option>').insertBefore('#links');
				
				$('#links #regione').each(function() {
					select.append('<option value="' + $(this).attr('node') + '">' + $(this).html() + '</option>');
				});
				
				$('#links, #switch').hide();
			});
		});
    </script>
	<button id="switch">Trasformazione!</button>


	<li data-id='40'>
		<div class='region-info' data-id='40' id="regione" node="40">ABRUZZO</div>
			<ul>
				<li data-id='73'><div class='region-info' data-id='73'>L'AQUILA</div>
				<li data-id='92'><div class='region-info' data-id='92'>PESCARA</div>
				<li data-id='106'><div class='region-info' data-id='106'>TERAMO</div>
			[/list]
	

	
	<li data-id='47'>
		<div class='region-info' data-id='47' id="regione" node="47">BASILICATA</div>
			<ul>
				<li data-id='82'><div class='region-info' data-id='82'>MATERA</div>
				<li data-id='97'><div class='region-info' data-id='97'>POTENZA</div>
			[/list]
	
	
	<li data-id='54'>
		<div class='region-info' data-id='54' id="regione" node="54">CAMPANIA</div>
			<ul>
				<li data-id='110'><div class='region-info' data-id='110'>AVELLINO</div>
				<li data-id='111'><div class='region-info' data-id='111'>BENEVENTO</div>
				<li data-id='56'><div class='region-info' data-id='56'>CASERTA</div>
				<li data-id='85'><div class='region-info' data-id='85'>NAPOLI</div>
				<li data-id='104'><div class='region-info' data-id='104'>SALERNO</div>
			[/list]

Per come è ora, ottengo effettivamente la select con SOLO le regioni

- ora o aggiunto 1 paramentro (node="") che potrei utilizzare per identificare in quale LI devo andare a pescare la sua SOTTOLISTA per creare la "famosa lista delle province... sono sulla strada giusta?

[SkyBlue]

Come detto prima io ti consiglierei di metterti tutte le città delle provincie in un oggetto... e poi con il select vi accedi all'interno....