Creazione di menù a tendina dinamici...

**Batta_85** · 17-01-2013, 19:28

ciao ragazzi...
ho bisogno di un aiutino...
ho il bisogno di creare 3 menù a tendina, 2 dei quali hanno il bisogno di essere riempiti dopo le scelte del primo menù, prima, e del secondo menù, poi.

X esempio:

1° menù a tendina: settore di attività -> scelta -> si riempie il 2° menù (categoria)
2° menù a tendina: categoria -> scelta -> si riempie il 3° menù (prodotti)

sapreste aiutarmi in qualche modo?!

se può aiutarvi vi posto il codice...

$sett = mysql_query("SELECT * FROM $db_settori ORDER BY nome_settore");
for ($i = 1; $i <= $smax; $i++)
{
$sett_att = mysql_fetch_row($sett);
$lista_sett_att[$i] = ($sett_att[1]);
}
for ($i = 1; $i <= $catmax; $i++)
{
$cat = mysql_query("SELECT * FROM categoria WHERE id_categoria = $i");
$categoria = mysql_fetch_assoc($cat);
$lista_categoria[$i] = ($categoria["nome_categoria"]);
}
for ($i = 1; $i <= $pmax; $i++)
{
$prod = mysql_query("SELECT * FROM $db_prodotti WHERE id_prodotti = $i");
$prod_serv = mysql_fetch_assoc($prod);
$lista_prodotti_servizi2[$i] = ($prod_serv["nome_prodotti"]);
}

<tr>
<th align='left' valign="middle" width='300' colspan="3">
<label>Settori di Attività</label>

<table width="1000">
<tr>
<th width="300">
<textarea name='settore' id='settore' cols='40' rows='4'><?php echo $settore; ?></textarea>
</th>
<th align="center" width="500">
<select id='settore_attivita2' name='settore_attivita2' onChange="set_player()">
<option value='' selected="selected"></option>
<?php for ($i = 1; $i <= count($lista_sett_att); $i++){?>
<option value="<?php echo $lista_sett_att[$i];?>"><?php echo $lista_sett_att[$i];?></option>
<?php }?>
</select>

<input type="button" value="<-" onclick="if (document.getElementById('categoria2').value!='') {document.getElementById('settore').value = document.getElementById('settore').value + document.getElementById('settore_attivita2').value + ' - ' + document.getElementById('categoria2').value +'\n';} document.getElementById('settore_attivita2').value =''; document.getElementById('categoria').value=''; document.getElementById('categoria2').value='';">
<input id='categoria' name='categoria' maxlength='255' type='text' onkeyup="inserimento(categoria,this.form.categoria 2,'value',true)" autocomplete="off"/>
<select id='categoria2' name='categorie2'>
</select>
<select id='prodotti' name='prodotti'>
</select>
</th>
</tr>
</table>
</th>
</tr>

ah c'è da dire che di javascript so molto poco...

grazie per l'aiuto!

**cavicchiandrea** · 17-01-2013, 19:48

Prendi spunto da questa discussione l'esempio e fatto su regione > provincia > comune, ma il concetto non cambia

P.S. Senza nessuna conoscenza di js non sarò cosa semplice

**Batta_85** · 17-01-2013, 19:54

Ok grazie mille dell'aiuto..

Ma sto vedendo che sono diversi file e molte righe di codice

Mica è possibile riassumere tutto in una funzioncina-ina-ina?..

**carlomarx** · 17-01-2013, 23:35

Tempo fa per semplice curiosità mi ero chiesto se fosse possibile realizzarlo in CSS. Il risultato è più o meno qualcosa del genere. Non c'è traccia di JavaScript. Te lo giro per conoscenza:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu condizionati</title>
<style type="text/css">
div.clists {
	position: relative;
	left: -200px;
	top: 0;
	width: 100%;
	height: 26px;
	margin-top: 2px;
}

div.clists span {
	display: block;
	position: absolute;
	left: 200px;
	top: -2px;
	display: block;
	height: 28px;
	line-height: 28px;
	width: 200px;
}

div.clists ul {
	display: block;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 400px;
	top: -2px;
	width: auto;
	height: auto;
	min-height: 24px;
	border: 2px #000000 solid;
}

div.clists li {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 150px;
	overflow: visible;
}

div.clists label {
	position: relative;
	z-index: 5001;
	cursor: pointer;
	font-size: 14px;
	background-color: #ffffff;
}

div.clists label, div.clists ul:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 24px;
	line-height: 24px;
	padding: 0 4px;
	width: 100%;
}

div.clists ul:before {
	content: "Scegliere\2026";
	position: absolute;
	z-index: 5000;
	font-style: italic;	
}

div.clists input[type="radio"], div.clists label, div.clists input[type="radio"] ~ ul, div.clists input[type="radio"] ~ span {
	display: none;
}

div.clists input[type="radio"]:checked ~ ul, div.clists input[type="radio"]:checked ~ span,
div.clists ul:hover > li > label, div.clists input[type="radio"]:checked ~ label {
	display: block;
}

div.clists label:hover {
	background-color: red;
}

div.clists ul:hover > li > input[type="radio"]:checked ~ label {
	background-color: blue !important;
}
</style>

</head>
 
<body>

<h1>Menu a tendina condizionati</h1>

<form name="modulo">



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue magna. Fusce a urna eros, ac ornare orci. Suspendisse eget nisi enim. Nam vitae diam justo, id scelerisque nunc. Cras id tincidunt risus. Nulla sit amet arcu sed ante tincidunt elementum. Integer vel orci justo. Quisque at molestie leo. Proin dignissim elit dignissim ligula ullamcorper mattis. Cras eu nulla nec tortor imperdiet vehicula. </p>

<div class="clists">
	<span>Etichetta gruppo 1:</span>
	<ul>

		[*]
			<input type="radio" checked name="gruppoA" value="1" id="clist-itemA1" /><label for="clist-itemA1">Opzione A1</label>
			<span>Etichetta gruppo 2:</span>
			<ul>
				[*]
					<input checked type="radio" name="gruppoB" value="1" id="clist-itemB1" /><label for="clist-itemB1">Opzione B1</label>
					<span>Etichetta gruppo 3:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="1" id="clist-itemC1" /><label for="clist-itemC1">Opzione C1</label>
						[*]<input type="radio" checked name="gruppoC" value="2" id="clist-itemC2" /><label for="clist-itemC2">Opzione C2</label>
						[*]<input type="radio" name="gruppoC" value="3" id="clist-itemC3" /><label for="clist-itemC3">Opzione C3</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="2" id="clist-itemB2" /><label for="clist-itemB2">Opzione B1</label>
					<span>Etichetta gruppo 4:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="4" id="clist-itemC4" /><label for="clist-itemC4">Opzione C4</label>
						[*]<input type="radio" name="gruppoC" value="5" id="clist-itemC5" /><label for="clist-itemC5">Opzione C1</label>
						[*]<input type="radio" name="gruppoC" value="6" id="clist-itemC6" /><label for="clist-itemC6">Opzione C1</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="3" id="clist-itemB3" /><label for="clist-itemB3">Opzione B1</label>
					<span>Etichetta gruppo 5:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="7" id="clist-itemC7" /><label for="clist-itemC7">Opzione C7</label>
						[*]<input type="radio" name="gruppoC" value="8" id="clist-itemC8" /><label for="clist-itemC8">Opzione C8</label>
						[*]<input type="radio" name="gruppoC" value="9" id="clist-itemC9" /><label for="clist-itemC9">Opzione C9</label>
						[*]<input type="radio" name="gruppoC" value="10" id="clist-itemC10" /><label for="clist-itemC10">Opzione C10</label>
					[/list]
				
			[/list]
		
		[*]
			<input type="radio" name="gruppoA" value="2" id="clist-itemA2" /><label for="clist-itemA2">Opzione A1</label>
			<span>Etichetta gruppo 6:</span>
			<ul>
				[*]
					<input type="radio" name="gruppoB" value="4" id="clist-itemB4" /><label for="clist-itemB4">Opzione B4</label>
					<span>Etichetta gruppo 7:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="11" id="clist-itemC11" /><label for="clist-itemC11">Opzione C11</label>
						[*]<input type="radio" name="gruppoC" value="12" id="clist-itemC12" /><label for="clist-itemC12">Opzione C12</label>
						[*]<input type="radio" name="gruppoC" value="13" id="clist-itemC13" /><label for="clist-itemC13">Opzione C13</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="5" id="clist-itemB5" /><label for="clist-itemB5">Opzione B5</label>
					<span>Etichetta gruppo 8:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="14" id="clist-itemC14" /><label for="clist-itemC14">Opzione C14</label>
						[*]<input type="radio" name="gruppoC" value="15" id="clist-itemC15" /><label for="clist-itemC15">Opzione C15</label>
					[/list]
				
			[/list]
		
		[*]
			<input type="radio" name="gruppoA" value="3" id="clist-itemA3" /><label for="clist-itemA3">Opzione A3</label>
			<span>Etichetta gruppo 9:</span>
			<ul>
				[*]
					<input type="radio" name="gruppoB" value="1" id="clist-itemB6" /><label for="clist-itemB6">Opzione B6</label>
					<span>Etichetta gruppo 10:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="16" id="clist-itemC16" /><label for="clist-itemC16">Opzione C16</label>
						[*]<input type="radio" name="gruppoC" value="17" id="clist-itemC17" /><label for="clist-itemC17">Opzione C17</label>
						[*]<input type="radio" name="gruppoC" value="18" id="clist-itemC18" /><label for="clist-itemC18">Opzione C18</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="7" id="clist-itemB7" /><label for="clist-itemB7">Opzione B7</label>
					<span>Etichetta gruppo 11:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="19" id="clist-itemC19" /><label for="clist-itemC19">Opzione C19</label>
						[*]<input type="radio" name="gruppoC" value="20" id="clist-itemC20" /><label for="clist-itemC20">Opzione C20</label>
						[*]<input type="radio" name="gruppoC" value="21" id="clist-itemC21" /><label for="clist-itemC21">Opzione C21</label>
					[/list]
				
			[/list]
		
	[/list]
</div>



Vivamus eleifend dolor at mi lacinia rutrum. Cras euismod enim pellentesque leo blandit lobortis. Nunc semper, ipsum eu vulputate posuere, augue arcu eleifend elit, vitae fermentum nulla libero id ante. Nulla id rhoncus nisi. Curabitur malesuada, ipsum sit amet sagittis porta, odio massa bibendum neque, semper pellentesque tortor quam ac dolor.</p>

</form>

</body>
</html>

Poi andrebbe personalizzato per renderlo più cool.

**cavicchiandrea** · 18-01-2013, 00:22

Carlo ottimo considerando che è solo puro css, anche se c'è qualche "difetto" (ameno che non sia voluto) con firefox 18 safari 6 chrome 24 sugli over si aprono tutte quando passi sull'ultima pseudo select http://webandylab.altervista.org/test-select-css.php, anche se non credo che possa servire a Batta_85

**carlomarx** · 18-01-2013, 00:42

Originariamente inviato da cavicchiandrea
Carlo ottimo considerando che è solo puro css, anche se c'è qualche "difetto" (ameno che non sia voluto) con firefox 18 safari 6 chrome 24 sugli over si aprono tutte quando passi sull'ultima pseudo select http://webandylab.altervista.org/test-select-css.php, anche se non credo che possa servire a Batta_85

Grazie per l'"ottimo"

No, non è voluto. Solo che non mi venne in mente una soluzione per evitarlo

Magari ci penserò e se mi verrà in mente una via d'uscita la posterò

**carlomarx** · 18-01-2013, 10:45

Ci ho pensato… L'unica scappatoia è far apparire le pseudoselect come se fossero multilinea. Così è accettabile:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu condizionati</title>
<style type="text/css">
div.clists {
	position: relative;
	left: -200px;
	top: 0;
	width: 100%;
	height: 96px;
	margin-top: 2px;
}

div.clists span {
	display: block;
	position: absolute;
	left: 200px;
	top: -2px;
	display: block;
	height: 28px;
	line-height: 28px;
	width: 200px;
}

div.clists ul {
	display: block;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 400px;
	top: -2px;
	width: auto;
	height: 100%;
	border: 2px #000000 solid;
}

div.clists li {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 150px;
}

div.clists label {
	position: relative;
	z-index: 5001;
	cursor: pointer;
	font-size: 14px;
	background-color: #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 24px;
	line-height: 24px;
	padding: 0 4px;
	width: 100%;
}

div.clists input[type="radio"], div.clists input[type="radio"] ~ ul, div.clists input[type="radio"] ~ span {
	display: none;
}

div.clists label, div.clists input[type="radio"]:checked ~ ul,
div.clists input[type="radio"]:checked ~ span, div.clists input[type="radio"]:checked ~ label {
	display: block;
}

div.clists label:hover {
	background-color: red;
}

div.clists input[type="radio"]:checked ~ label {
	background-color: blue !important;
}
</style>

</head>
 
<body>

<h1>Menu a tendina condizionati</h1>

<form name="modulo">



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue magna. Fusce a urna eros, ac ornare orci. Suspendisse eget nisi enim. Nam vitae diam justo, id scelerisque nunc. Cras id tincidunt risus. Nulla sit amet arcu sed ante tincidunt elementum. Integer vel orci justo. Quisque at molestie leo. Proin dignissim elit dignissim ligula ullamcorper mattis. Cras eu nulla nec tortor imperdiet vehicula. </p>

<div class="clists">
	<span>Etichetta gruppo 1:</span>
	<ul>
		[*]
			<input type="radio" name="gruppoA" value="1" id="clist-itemA1" /><label for="clist-itemA1">Opzione A1</label>
			<span>Etichetta gruppo 2:</span>
			<ul>
				[*]
					<input type="radio" name="gruppoB" value="1" id="clist-itemB1" /><label for="clist-itemB1">Opzione B1</label>
					<span>Etichetta gruppo 3:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="1" id="clist-itemC1" /><label for="clist-itemC1">Opzione C1</label>
						[*]<input type="radio" name="gruppoC" value="2" id="clist-itemC2" /><label for="clist-itemC2">Opzione C2</label>
						[*]<input type="radio" name="gruppoC" value="3" id="clist-itemC3" /><label for="clist-itemC3">Opzione C3</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="2" id="clist-itemB2" /><label for="clist-itemB2">Opzione B2</label>
					<span>Etichetta gruppo 4:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="4" id="clist-itemC4" /><label for="clist-itemC4">Opzione C4</label>
						[*]<input type="radio" name="gruppoC" value="5" id="clist-itemC5" /><label for="clist-itemC5">Opzione C5</label>
						[*]<input type="radio" name="gruppoC" value="6" id="clist-itemC6" /><label for="clist-itemC6">Opzione C6</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="3" id="clist-itemB3" /><label for="clist-itemB3">Opzione B3</label>
					<span>Etichetta gruppo 5:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="7" id="clist-itemC7" /><label for="clist-itemC7">Opzione C7</label>
						[*]<input type="radio" name="gruppoC" value="8" id="clist-itemC8" /><label for="clist-itemC8">Opzione C8</label>
						[*]<input type="radio" name="gruppoC" value="9" id="clist-itemC9" /><label for="clist-itemC9">Opzione C9</label>
						[*]<input type="radio" name="gruppoC" value="10" id="clist-itemC10" /><label for="clist-itemC10">Opzione C10</label>
					[/list]
				
			[/list]
		
		[*]
			<input type="radio" name="gruppoA" value="2" id="clist-itemA2" /><label for="clist-itemA2">Opzione A2</label>
			<span>Etichetta gruppo 6:</span>
			<ul>
				[*]
					<input type="radio" name="gruppoB" value="4" id="clist-itemB4" /><label for="clist-itemB4">Opzione B4</label>
					<span>Etichetta gruppo 7:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="11" id="clist-itemC11" /><label for="clist-itemC11">Opzione C11</label>
						[*]<input type="radio" name="gruppoC" value="12" id="clist-itemC12" /><label for="clist-itemC12">Opzione C12</label>
						[*]<input type="radio" name="gruppoC" value="13" id="clist-itemC13" /><label for="clist-itemC13">Opzione C13</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="5" id="clist-itemB5" /><label for="clist-itemB5">Opzione B5</label>
					<span>Etichetta gruppo 8:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="14" id="clist-itemC14" /><label for="clist-itemC14">Opzione C14</label>
						[*]<input type="radio" name="gruppoC" value="15" id="clist-itemC15" /><label for="clist-itemC15">Opzione C15</label>
					[/list]
				
			[/list]
		
		[*]
			<input type="radio" name="gruppoA" value="3" id="clist-itemA3" /><label for="clist-itemA3">Opzione A3</label>
			<span>Etichetta gruppo 9:</span>
			<ul>
				[*]
					<input type="radio" name="gruppoB" value="1" id="clist-itemB6" /><label for="clist-itemB6">Opzione B6</label>
					<span>Etichetta gruppo 10:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="16" id="clist-itemC16" /><label for="clist-itemC16">Opzione C16</label>
						[*]<input type="radio" name="gruppoC" value="17" id="clist-itemC17" /><label for="clist-itemC17">Opzione C17</label>
						[*]<input type="radio" name="gruppoC" value="18" id="clist-itemC18" /><label for="clist-itemC18">Opzione C18</label>
					[/list]
				
				[*]
					<input type="radio" name="gruppoB" value="7" id="clist-itemB7" /><label for="clist-itemB7">Opzione B7</label>
					<span>Etichetta gruppo 11:</span>
					<ul>
						[*]<input type="radio" name="gruppoC" value="19" id="clist-itemC19" /><label for="clist-itemC19">Opzione C19</label>
						[*]<input type="radio" name="gruppoC" value="20" id="clist-itemC20" /><label for="clist-itemC20">Opzione C20</label>
						[*]<input type="radio" name="gruppoC" value="21" id="clist-itemC21" /><label for="clist-itemC21">Opzione C21</label>
					[/list]
				
			[/list]
		
	[/list]
</div>



Vivamus eleifend dolor at mi lacinia rutrum. Cras euismod enim pellentesque leo blandit lobortis. Nunc semper, ipsum eu vulputate posuere, augue arcu eleifend elit, vitae fermentum nulla libero id ante. Nulla id rhoncus nisi. Curabitur malesuada, ipsum sit amet sagittis porta, odio massa bibendum neque, semper pellentesque tortor quam ac dolor.</p>

</form>

</body>
</html>

**Batta_85** · 18-01-2013, 11:18

grazie mille per gli aiuti che mi avete dato!...

Ora provo il tutto e poi vi farò sapere!

Grazie ancora!

**cavicchiandrea** · 18-01-2013, 12:46

Ho fatto un test sulla pagina demo con iPad (safari) e non funziona

**Batta_85** · 18-01-2013, 17:11

L'idea è buona e funzionale ma (scusate se vi dico questo) ho un bordello di opzioni da poter utilizzare e vorrei utilizzare i menù che l'html ha di default, senza css, colori o quant'altro!..niente colori insomma, ecco perchè volevo utilizzare il java che , anche se lo conosco moltissimo, solo le basi, mi rimane più comodo!

Discussione: Creazione di menù a tendina dinamici...

Strumenti discussione

Ricerca discussione

Visualizza

Creazione di menù a tendina dinamici...

Permessi di invio