Réinitialiser un SELECT

Version imprimable

09/02/2015, 11h01
DavidWebSolution

Réinitialiser un SELECT

Bonjour.

J'imagine que ce que je veux faire est hyper simple mais je ne sais pas comment on fait.
Actuellement, si je choisis un champ dans une liste déroulante, puis que je rafraichis la page (avec F5), le focus reste sur ce champ alors qu'il m'affiche l'option par défaut.
Je ne sais pas si c'est très clair.
Voici le site sur lequel je travail :
http://blog.vitaliform.fr/#section-nous-trouver
Si sur la droite on choisit une ville dans le SELECT : la carte se centre bien sur cette ville.
Mais si je fais un F5, elle revient sur la vue globale mais le champ reste sélectionné sur la ville que j'avais choisies.

J'aimerais :
1) quand je cliques sur F5 que le SELECT se repositionne sur la valeur par défaut "Choisis ta ville"
2) ou je ne sais pas si c'est possible, j'aimerais également que quand je fais F5, que le SELECT reste sur la ville mais que la carte reste positionnée sur cette ville.
C'est 2 cas de figure incompatibles entre eux (je ne peux pas avoir les 2 comportements en même temps bien sûr), mais j'aimerais être capable de mettre en place l'un ou l'autre.

Comment faire ça ?
09/02/2015, 11h09
kevin254kl

Bonjour, en stockant le choix dans $_SERVER variable super global php,et avec javascript lors du rechargement de la page rajouter selected au choix précédemment fait par l'utilisateur cela ne fonctionnerait pas?
09/02/2015, 11h12
DavidWebSolution

C'est pour le point 2) je suppose ?

Mais comment faire pour repositionner le SELECT sur la valeur par défaut quand on fait F5 ? J'imagine qu'il doit y avoir une instruction JS qui fait ça ?
09/02/2015, 11h18
Bovino

Citation:

en stockant le choix dans $_SERVER

:nono:
Ca voudrait dire que tous les utilisateurs se retrouveraient avec le choix du précédent utilisateur (le dernier qui aurait modifié la variable serveur). :aie:

Le plus simple, ce de faire en JavaScript au chargement de la page :
* récupérer la valeur de ton select ;
* pour le cas 1, lui redonner sa valeur par défaut ;
* pour le cas 2, lancer la fonction utilisée sur le onchange avec la valeur si elle est différente de la valeur par défaut.
11/02/2015, 20h55
kevin254kl

Merci pour la rectification je voulais dire $_SESSION.

Voilà ce que j'ai fait, et ça fonctionne.
Voici le code de mes infos et vidéo à afficher :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="txt-videotron-1" class="bloc_videotron">
<h3>Cracki records Open air (1/2)</h3>
Après avoir explosé le parc de Belleville. Ils ont envahit le bois de Vincennes pour un Open air dantesque !
<p class="nom_groupe_videotron"><a href="http://www.crackirecords.com">Cracki records</a></p>
 
<div class="bloc_lecteur_video">[ut_video_youtube url="cJu0yFBWMX4"]</div>
</div>
<div id="txt-videotron-2" class="bloc_videotron">
<h3>Cracki records Open air (2/2)</h3>
Deuxième partie de cette grosse teuf en direct du Bois de Vincennes.
<p class="nom_groupe_videotron">Cracki records</p>
 
<div class="bloc_lecteur_video">[ut_video_youtube url="zQZbFjVDEtc"]</div>
</div>

et voici mon select :

Code:

1
2
3
4
5
6
7
<div class="bloc_a_centrer">
<div class="bloc_formulaire_videotron" style="text-align: center;"><form class="formulaire_videotron"><select id="noms_videos" class="select_video" name="noms_videos">
<option value="">Choisis une vidéo</option>
<option value="txt-videotron-1">Cracki records Open air (1/2)</option>
<option value="txt-videotron-2">Cracki records Open air (2/2)</option>
</select></form></div>
</div>

Pour finir, voici le js :

Code:

1
2
3
4
5
6
7
8
9
10
<script>// <![CDATA[
jQuery(document).ready(function($) {
$('.select_video').change(function(){
		$('.bloc_videotron').hide();
		$('#' + this.value ).show();
	});
$('#noms_videos > option[value="txt-videotron-1"]').prop('selected',true);
$('#noms_videos').change();
});
// ]]></script>

Tout ça marche bien quand on n'a que qq vidéos mais dans mon cas, il y en a une trentraine et du coup, la page est beaucoup trop longue à charger, à cause du temps de latente entre mon site et le site des x vidéos.

Du coup, il va me falloir une solution qui consiste à aller chercher la vidéos dans la base de données et à l'afficher une fois sélectionnée. Et comme je ne veux pas que la page se recharge, il va me falloir utiliser AJAX.