Select dinamiche,visualizzazine immagine!

[Vindav]

<select name="città" onChange="swapImage()">
<option value="" selected="selected">Seleziona una città:</option>
</select>

[darko1984]

niente non funziona

[simo_JQ]

Ciao,

iO ti offro un'alternativa Jquery.

Prima cosa devi includere nell'head la libreria Jquery mettendo questo nella Head apputo:

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>

poi lo script per fare quello che ti serve, sempre nella HEAD

<script type="text/javascript">
$(function(){
		   $("#dd").change(function(){
								   var path = $(this).val();
								   $("#imageToSwap").attr("src",path);
								   });
		   });
</script>

Provato, funziona.

[darko1984]

ragazzi non ci siamo non funziona niente..non so se avete visto come è fatto lo script di html.it ma con quello che mi avete postato non riesco a collegarlo...................................

[simo_JQ]

ok, credo di aver capito...


prendo in riferimento l'esempio di HTML.it Poi tu cambialo a seconda di quello che serve a te:

<form name="form">
Invia la richiesta a:
<select name="continente" onchange="setCities(this)">
<option value="" selected="selected">Seleziona un
continente:</option> <option value="africa">Africa</option>
<option value="asia">Asia</option>
<option value="australia">Australia/Oceania</option>
<option value="europa">Europa</option>
<option value="noamer">Nord America</option>
<option value="suamer">Sud America</option>
</select>

<select name="citta">
<option value="" selected="selected">Seleziona una città:</option>
</select>
</form>

Lo script è sempre quello di prima, tu segui la guida di HTML.it senza pensare a quello che devi fare dopo. Una volta fatto avrai appunto un primo select e poi un secondo che qui chiamano "citta".

ecco cosa devi inserire nella head:

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
		   $("select[name='nome del tuo select']").change(function(){
								   var path = $(this).val();
								   $("id della tua immagine").attr("src",path);
								   });
		   });
</script>

allora:

1) Dove ho scritto "nome del tuo select" qui metti il name del secondo SELECT (nel caso dell'esempio città)

$("select[name='citta']").change(function(){

2) Dove ho scritto "id della tua immagine" qui devi mettere l'id UNIVOCO che si riferisce all'immagine che deve cambiare ogni volta che selezioni una nuova select.
Ricordati di mettere l'alt all'immagine tipo "ALT='seleziona un'immagine'" in modo che quando non hai selezionato nulla non rimane VUOTO.

capisci?

[Vindav]

ci sei di grande aiuto dicendo "non funziona niente"...

Ultima prova poi se mi dici ancora non funziona senza dare un minimo di spiegazione direi che puoi anche fartela da solo:

<select id="dd" onChange="swapImage(this)">
<option value="">Scegli una webcam</option>
<option value="indirizzoweb/webcam.jpg">webcam1</option>
<option value="indirizzoweb/webcam.jpg">webcam2</option>
<option value="indirizzoweb/webcam.jpg">webcam3</option>
</select>
[img][/img]

<script type="text/javascript">
function swapImage(dropd){
	var image = document.getElementById("imageToSwap");
	image.src = dropd.options[dropd.options.selectedIndex].value
};
</script>

Come ti ho già detto la select dd corrisponde alla select citta dell' esempio.

@simo scaricare un framework perche non riesci a far funzionare uno script di una tale banalità non è certo la soluzione...

[darko1984]

Ok cerco di spiegare..
@Vindav
Ora i 2 select sembrano essere completamente separati,le scelte fatte sul primo,cioè i continenti,non influenzano il secondo select..Facciamo cosi,utilizziamo solo africa..una volta selezionato africa voglio che il secondo select mi dica "scegli una webcam" e mi faccia vedere la lista delle 3 webcam che corrispdonno a quel continente..E cosi via per gli altri continenti..

[Vindav]

ohhh ora è chiaro, ti ringrazio per la spiegazione, scusa ma mi stavi facendo innervosire

Per fare quello che chiedi devi modificare il codice dell'esempio , andando ad sostituire nell'array i valore che ti interessano. Esempio:

regiondb["africa"] = [{value:"indirizzoweb/webcam1.jpg", text:"webcam1"},

                      {value:"indirizzoweb/webcam2.jpg", text:"webcam2"},

                      {value:"indirizzoweb/webcam3.jpg", text:"webcam3"},

                      {value:"indirizzoweb/webcam4.jpg", text:"webcam4"}];

Ora quando selezionerai africa nella prima select, la seconda si popolerà con i valori che ho inserito nell'array. Il codice per caricare l'immagine invece rimane uguale.

[simo_JQ]

io cerco solo di aiutare come posso. Liberi di fare in altro modo comunque.

[darko1984]

Per carità ti capisco sono un pò cocciuto
Ancora non vò,il secondo select non si popola,ora ti copio ed incollo il codice che sto usando fin qui:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>

<title>Select dinamiche - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="Con questo script è possibile risolvere uno dei più comuni problemi di implementazione nella creazione di form. Parliamo dei menu a tendina (select) che cambiano i rispettivi valori in base alla selezione effettuata in un'altra select. Il caso più tipico, utilizzato anche nell'esempio proposto, è quello di menu con città che si adeguano alla scelta di regioni, stati o continenti." />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />

<script type="text/javascript">
/*
Script tratto dal libro "JavaScript and DHTML Cookbook" - Capitolo 8-13
Pubblicato da O'Reilly & Associates
Copyright 2003 Danny Goodman
Riprodurre questa nota per qualunque riutilizzo del codice.
*/
var regiondb = new Object()
regiondb["africa"] = [{value:"http://meteocecchina.altervista.org/webcam/webcam.jpg", text:"dfgfdg"},
{value:"http://albanometeo.it/images/Live/webcam.jpg", text:"dfgdfg"},
{value:"80", text:"Nairobi"},
{value:"55", text:"Pretoria"}];
regiondb["asia"] = [{value:"http://albanometeo.it/images/Live/webcam.php", text:"Ankara"},
{value:"21", text:"Bangkok"},
{value:"49", text:"Pechino"},
{value:"76", text:"New Delhi"},
{value:"14", text:"Tokyo"}];

function setCities(chooser) {
var newElem;
var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
var cityChooser = chooser.form.elements["città"];
while (cityChooser.options.length) {
cityChooser.remove(0);
}
var choice = chooser.options[chooser.selectedIndex].value;
var db = regiondb[choice];
newElem = document.createElement("option");
newElem.text = "Seleziona una città:";
newElem.value = "";
cityChooser.add(newElem, where);
if (choice != "") {
for (var i = 0; i < db.length; i++) {
newElem = document.createElement("option");
newElem.text = db[i].text;
newElem.value = db[i].value;
cityChooser.add(newElem, where);
}
}
}

</script>
<script type="text/javascript">
function swapImage(dropd){
var image = document.getElementById("imageToSwap");
image.src = dropd.options[dropd.options.selectedIndex].value
};
</script>



</head>
<body >



<div align="center">


<h1>Esempio - Select dinamiche</h1>
<hr>
<form name="form">
Invia la richiesta a:
<select name="continente" onchange="setCities(this)">
<option value="" selected="selected">Seleziona un continente:</option>
<option value="africa">Africa</option>
<option value="asia">Asia</option>
<option value="australia">Australia/Oceania</option>
<option value="europa">Europa</option>
<option value="noamer">Nord America</option>
<option value="suamer">Sud America</option>
</select>
<select id="dd" onChange="swapImage(this)">
<option value="">Scegli una webcam</option>
<option value="indirizzoweb/webcam.jpg">webcam1</option>
<option value="indirizzoweb/webcam.jpg">webcam2</option>
<option value="indirizzoweb/webcam.jpg">webcam3</option>
</select>
[img][/img]

</form>


</div>







<div align="center">
[img]logo_htmlit.gif[/img]
</div>


</body>
</html>