Retenir un choix dans une liste déroulante en javascript

Bonjour,
Ce code fonctionne aussi pour ma liste déroulante. J'ai bien la ville qui s'affiche dans mon <div</div> en bas.
Mais ce que je souhaite c'est afficher la ville choisi à l’intérieur de mon <li></li> aussi !
Pour cela j'ai pensé au sessions ($_SESSION) mais je sais vraiment pas comment faire ?
Si vous pouvez me mettre sur la voie ?
J'ai testé en faisant par exemple :

<?php
session_start();
$_POST['ville'] = $_SESSION['ville'];

if($_POST['ville'] == $_SESSION['ville'])
{
$_SESSION['ville'] == $_POST['ville'];
}
else
{
$_SESSION['ville'] == 'marseille';
}
?>

<nav>
<ul class="nav">
    <li class="nav-item"><div><?php echo $_SESSION['ville']; ?></div>
	</li>
</ul>
</nav>

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

$(function(){
	$('#ville').on('change',function(){
		$('div').text($(this).val());
	});
});
	</script>


<form action="" method="post">
	<h4>Dans quelle ville souhaites tu habiter ?</h4>
		<select name="ville" id="ville">
			<option value="marseille" selected="selected">Marseille</option>
			<option value="bordeaux">Bordeaux</option>
			<option value="lyon">Lyon</option>
		</select>
</form>

<div></div>

J'ai bien la ville qui s'affiche dans mon <li> mais par défaut je souhaite afficher "marseille" et c'est "lyon" qui s'affiche !
Je voudrais aussi que par défaut "marseille" s'affiche dans mon <div></div> (ligne 46, tout en bas du code) avant de selectionner une ville ?
Merci de votre aide
Modifié par woubi (25 May 2014 - 10:17)

Les sessions n'ont rien à voir. Les Session servent à transiter des données entres plusieurs pages côté serveur.

$('div, nav .nav-item:first div').text($(this).val());

Modifié par niuxe (25 May 2014 - 16:40)

Merci,

Oui bien sûr! cependant je veux récupérer un champs avant toute sélection donc j'ai fait cela :

<?php
session_start();
$_SESSION['ville'] = 'marseille';
?>
<nav>
<ul class="nav">
    <li class="nav-item"><div><?php echo $_SESSION['ville']; ?></div>
	</li>
</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script>
$(function(){
	$('#ville').on('change',function(){
		$('section, nav .nav-item:first div').text($(this).val());
	});
});
	</script>
<form action="" method="post">
	<h4>Dans quelle ville souhaites tu habiter ?</h4>
		<select name="ville" id="ville">
			<option value="marseille" selected="selected">Marseille</option>
			<option value="bordeaux">Bordeaux</option>
			<option value="lyon">Lyon</option>
		</select>
</form>
<section><?php echo $_SESSION['ville']; ?></section>

Maintenant j'aimerais bien que une fois que j'ai choisi 'lyon' par exemple et que je ferme ma page. Alors quand je l'ouvre de nouveau le choix affiche 'lyon' (qu'il se souvienne de mon dernier choix au chargement de la page!!). Comment faire ?

Perso, ton code est intrusif et obstructif. Nettement plus mieux :

<?php
session_start();
$_SESSION['ville'] = 'marseille';
?>
<nav>
<ul class="nav">
    
</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script>
$(function(){
if($('form+#villes').length == 0 && $('nav .nav-item:first div').length == 0){
	var elVilles = '<div id="villes"></div>',
		elLiNav = '<li class="nav-item"><div></div></li>';

	$(this).closest('form').after(elVilles);
	$('nav .nav-item:first div').prepend(elLiNav);
	$('section, nav .nav-item:first div').text($('#ville option:selected').val());
	}
	$('#ville').on('change',function(){

		$('section, nav .nav-item:first div').text($(this).val());
	});
});
	</script>
<form action="" method="post">
	<h4>Dans quelle ville souhaites tu habiter ?</h4>
		<select name="ville" id="ville">
			<option value="marseille" selected="selected">Marseille</option>
			<option value="bordeaux">Bordeaux</option>
			<option value="lyon">Lyon</option>
		</select>
</form>

*code fait de tête. J'ai peut être fait une ou plusieurs erreurs

a écrit :
Maintenant j'aimerais bien que une fois que j'ai choisi 'lyon' par exemple et que je ferme ma page. Alors quand je l'ouvre de nouveau le choix affiche 'lyon' (qu'il se souvienne de mon dernier choix au chargement de la page!!). Comment faire ?

les cookies côté front

function SetCookie (name, value) {
       var argv=SetCookie.arguments;
       var argc=SetCookie.arguments.length;
       var expires=(argc>  2) ? argv[2] : null;
       var path=(argc>  3) ? argv[3] : null;
       var domain=(argc>  4) ? argv[4] : null;
       var secure=(argc>  5) ? argv[5] : false;
       document.cookie=name+"="+escape(value)+
               ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
               ((path==null) ? "" : ("; path="+path))+
               ((domain==null) ? "" : ("; domain="+domain))+
               ((secure==true) ? "; secure" : "");
}

function getCookieVal(offset) {
       var endstr=document.cookie.indexOf (";", offset);
       if (endstr==-1)
               endstr=document.cookie.length;
       return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
       var arg=name+"=";
       var alen=arg.length;
       var clen=document.cookie.length;
       var i=0;
       while (i<clen) {
               var j=i+alen;
               if (document.cookie.substring(i, j)==arg)
                       return getCookieVal (j);
               i=document.cookie.indexOf(" ",i)+1;
                       if (i==0) break;}
       return null;
}

Les deux fonctions qui t'intéressent sont : GetCookie & SetCookie

getCookieVal est utilisée dans GetCookie.
Modifié par niuxe (26 May 2014 - 21:36)

ou le local storage :

localStorage.setItem('key','value');
localStorage.getItem('key');
localStorage.removeItem('key');

Tu peux également écrire de cette manière :

localStorage['key'] = value; //setItem
localStorage['key']; //getItem
localStorage['key'] = ""; //removeItem 

Le localStorage c'est IE8+ de mémoire. Pour webkit et Gecko c'est en place depuis belle lurette....

Une question me taraude, à quoi te sert le formulaire ? Si c'est pour la manip que tu essayais de faire, dis toi que tu es à côté de la plaque. Je t'invite à revoir les bases (le HTML)

Un formulaire est une interaction avec le serveur.
Mauvaise pratique très répandue.
Modifié par niuxe (26 May 2014 - 21:31)

J'ai merdé avec les onglets. Si un modo peut supprimer le message, ce serait sympa. Désolé pour la bêtise
Modifié par niuxe (26 May 2014 - 22:20)

Merci,
Je comprends pas ton code jquery, bon je suis en train de suivre un tuto sur le jquery donc c'est normal que je comprenne pas mais pourquoi mentionnes tu des : <li class="nav-item"> alors qu'ils ont disparu dans ton code html ?
Sinon les cookies j'ai pas compris non plus, je dois les ajouter au code jquery en remplacant le "name" et la "value" ?
J'ai fais un test mais mon choix n'est pas retenu...
Et le local storage ???? je sais pas ce que c'est ?
La question qui te taraude c'est simplement qu'un visiteur qui a l'habitude d'aller sur une page en particulier et bien il l'a trouve sans passer par le menu ensuite. Voila!
Je vais étudier ta réponse et voir si j'arrive à quelque chose.
Merci

woubi a écrit :
Merci,
Je comprends pas ton code jquery, bon je suis en train de suivre un tuto sur le jquery donc c'est normal que je comprenne pas mais pourquoi mentionnes tu des : &lt;li class=&quot;nav-item&quot;&gt; alors qu'ils ont disparu dans ton code html ?

lis le code que je t'ai filé et regarde le code en console.

woubi a écrit :
Sinon les cookies j'ai pas compris non plus, je dois les ajouter au code jquery en remplacant le &quot;name&quot; et la &quot;value&quot; ?
J'ai fais un test mais mon choix n'est pas retenu...
Et le local storage ???? je sais pas ce que c'est ?

woubi a écrit :
La question qui te taraude c'est simplement qu'un visiteur qui a l'habitude d'aller sur une page en particulier et bien il l'a trouve sans passer par le menu ensuite. Voila!
Je vais étudier ta réponse et voir si j'arrive à quelque chose.
Merci

C'est bien ce que je te disais, ce n'est pas la bonne manière. Tu es à côté de la plaque. Un menu déroulant créé de toute pièce en JS ou avec une interaction avec le serveur.

Tu as dit : "C'est bien ce que je te disais, ce n'est pas la bonne manière. Tu es à côté de la plaque. Un menu déroulant créé de toute pièce en JS ou pas"

Je me suis mal fait comprendre ou mal exprimé, ce que je voulais dire c'est que je souhaite simplement que mon "widget" météo enregistre la dernière ville choisie pour la prochaine connexion de l'internaute, ma page reste la même bien sur (index.php) !

Voilà!