Bonjour,

j'ai un problème que je n'arrive pas à résoudre depuis plusieurs heures avec une lsite déroulante.
Voila se que je cherche à faire :


Ma base de donnée est actuellement constitué d'une table avec comme colonne id nom(de villes) et photo.


J'ai le nom de mes image correspond à l'id de la ville et toutes les images se trouvent dans un dossier appelé fond.


A travers ma liste déroulante j'affiche le nom des villes et si je change de ville je veux changer la photo en fond d'écran de mon site avec la photo correspondant.

Voici ma fonction :

<script type="text/javascript">
		$(function(){
			
			$('#Items').change(function() {
				var id_ville = $("#Items option:selected").val();
				alert('fond/' + id_ville + '.jpg'); // test !
				$('body').css('background-image','url(fond/' + id_ville + '.jpg)');
			});
			
			$("a.tooltiplink").simpletooltip();
			$("a.clic").simpletooltip({click: true});
			$("a.delay").simpletooltip({hideDelay: 0.5});
			$("#demo_1").simpletooltip({ margin: 10 });
			$("#demo_2").simpletooltip({ showEffect: "fadeIn", hideEffect: "fadeOut" });
			$("#demo_3").simpletooltip({ showEffect: "slideDown", hideEffect: "slideUp" });
			$("#demo_4").simpletooltip({ showEffect: "show", hideEffect: "hide" });
			$("#demo_5").simpletooltip({ click: true });
			$("#demo_6").simpletooltip({ hideDelay: 0.5 });
			$("#demo_7").simpletooltip({ click: true, hideOnLeave: false });
			$("#demo_8").simpletooltip({
				callback: function(tooltip){
					window.alert('Callback : affichage de la tooltip #'+tooltip.id);
				}
			});
			$("#demo_9").simpletooltip({
				customTooltip: function(target){
					return '<p style="width:200px;height:50px;margin:0;padding:10px;background:#fff;border:1px solid #000;">Texte de l\'élément survolé :<br /> "'+ $(target).text() +'" </p>';
				},
				showEffect: "fadeIn",
				hideEffect: "fadeOut"
			});
		});
	   </script>

Et ici ma liste déroulante :

<div class="option">
		<form method="post" action="projet_isep.php" id="form_items" name="form_items">
			<select name="Items" id="Items" onchange="change_image();">
				<?php
				 
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
					
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM villes');
					
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>

				<option value="<?php echo $donnees['id']; ?>"><?php echo $donnees['nom']; ?></option>
			
				<?php
					}
							  
						$reponse->closeCursor(); // Termine le traitement de la requête
					
					}
				catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>

			</select>
		</form>
	</div>

Et pourtant quand je change de villes dans ma liste déroulantel'image de fond reste inchangée.

merci pour votre aide

Avec jQuery, tu spécifies juste la liste pour avoir sa valeur (comme un champs texte), c'est surement ça ton problème :

var id_ville = $("#Items").val();

J'ai trouvé!!!!!!

J'avais dans mon custom.js la fonction suivante :

$(document).ready(function() {
			$('#Items').selectbox();
			});

qui me permet d'avoir une liste déroulante jquery

et lorsque je l’enlève tout marche.

Alors j'aimerais savoir s'il est possible de la conserver pour ainsi garder ma liste déroulante jquery et faire fonctionner la fonction onchange en même temps.

EDIT : je pense que la source de mon problème vient du script suivant nécessaire pour la lliste déroulante jquery, on y voit qu'il utilise une fonction onchange qui je crois est la source du problème :

// création d'une liste
        function createList(f){
            // créer la première zone, affichant l'option sélectionnée
            var cell = $('<div class="dropdownCell">' + opts.title + '</div>');
 
            // créer la seconde zone, affichant toutes les options
            var dropdown = $('<div class="dropdownPanel"></div>');               
 
            $(this).find("option").each(function(){
                dropdown.append($('<div class="dropdownOpt"></div>')
                    .click(onSelect)
                    .attr("value", $(this).attr("value"))
                    .append($(this).html())       
                    .hover(function(){$(this).addClass("dropdownOptSelected");},
                           function(){$(this).removeClass("dropdownOptSelected");})
                );
            });
 
            // on masque la zone déroulante
            dropdown.hide();
            $.data(cell, "visible", false);
 
            // on remplace la balise ul par notre liste personnalisée
            $(this).after(dropdown);
            $(this).after(cell);
            $(this).remove();
 
            // on positionne l'évènement de déroulage de la liste
            cell.click(function(){       
                // si la liste est déroulée
                if ($.data(cell, "visible")){
                    dropdown.slideUp("fast");
                    $.data(cell, "visible", false);
                }else{
                    dropdown.slideDown("fast");
                    $.data(cell, "visible", true);
                }
            });
 
            // fonction appelée à chaque sélection d'un élément
            function onSelect(){           
                cell.html($(this).html());
                cell.attr("value", $(this).attr("value"));
                dropdown.slideUp("fast");
 
                $.data(cell, "visible", false);
 
                // appel d'une fonction personnalisée
                if (opts.selectEvent)
                    opts.selectEvent($(this));
            }               
        }