Partage

[jQuery] Exercice pour s'entraîner

Listes déroulantes liées

Sujet résolu
26 janvier 2012 à 11:59:36

Super initiative Desolation.
C'est génial de faire ces exos et malgré quelques prises de tête j'y suis arrivé.
J'ai notamment essayé de récupérer entièrement et en une fois
<option value="fruit">Fruit</option>
mais en vain.

Mais voici mon code
$(function(){
	$('#liste_fruits').change(function() {
		$('#ajouter').removeAttr('disabled');
	})
	$('#panier').change(function() {
		$('#supprimer').removeAttr('disabled');
	})
	$('#ajouter').click(function(){
		save_panier = $('#panier').html();	// Recupere html du panier
		// ajoute au panier la nouvelle <option>
		$('#panier').html(save_panier+'<option value="'+$('#liste_fruits option:selected').val()+'">'+$('#liste_fruits option:selected').text()+'</option>');
		$('#liste_fruits option[value="'+$('#liste_fruits').val()+'"]').remove();	// on supprime <option> ajoutée de la liste
		$('#ajouter').attr('disabled','disabled');	// on desactive à nouveau le bouton
	})
	$('#supprimer').click(function(){
		save_liste_fruits = $('#liste_fruits').html();	// Recupere html de liste_fruits
		// ajoute a liste_fruits la nouvelle <option>
		$('#liste_fruits').html(save_liste_fruits+'<option value="'+$('#panier option:selected').val()+'">'+$('#panier option:selected').text()+'</option>');
		$('#panier option[value="'+$('#panier').val()+'"]').remove();	// on supprime <option> ajoutée du panier
		$('#supprimer').attr('disabled','disabled');	// on desactive à nouveau le bouton
	})
});
27 janvier 2012 à 19:11:12

Le mien :

$("#liste_fruits").change(function() {
		$("#ajouter").attr('disabled', false);
});

$("#panier").change(function() {
	$("#supprimer").attr('disabled', false);
});

$('#ajouter').click(function() {
	$('#panier').append(new Option($('#liste_fruits option:selected').val(), $('#liste_fruits option:selected').val(), true, true));
	$('#panier option[value="' + $('#liste_fruits option:selected').val() + '"]').removeAttr('selected');
	$('#liste_fruits option:selected').remove();
	
	if($('#liste_fruits option').length > 0) {
		$('#liste_fruits option:first').attr("selected", true);
	} else {
		$("#ajouter").attr('disabled', 'disabled');
	}
});

$('#supprimer').click(function() {
	$('#liste_fruits').append(new Option($('#panier option:selected').val(), $('#panier option:selected').val(), true, true));
	$('#liste_fruits option[value="' + $('#panier option:selected').val() + '"]').removeAttr('selected');
	$('#panier option:selected').remove();
	
	if($('#panier option').length > 0) {
		$('#panier option:first').attr("selected", true);
	} else {
		$('#supprimer').attr('disabled', 'disabled');
	}
});
;
7 avril 2012 à 0:46:33

des que je finis mon travail je crois que je vais m'y mettre moi aussi sa a l'air ttrés sympa de travailler avec vous!!! :D
10 juillet 2012 à 12:07:25

Bonjour,

L'exercice est très sympa et la solution plaisante.
Par contre, comment faire pour récupérer le contenu de Mon panier depuis un autre fichier ?
J'entends par là que dès que la selection est faite, en appuyant par exemple sur un troisième bouton "Envoyer" qui nous dirige vers un fichier afficher.php, on aurait à l'écran la selection qui s'affiche.

Je demande ça car ça fait 2 semaines que je ne parviens pas à le faire... :D
En fait j'ai utilisé un select multiple inclu dans un form mais dans afficher.php, il ne connaît plus rien du contenu du select ???
Merci.
10 juillet 2012 à 14:12:12

Citation : Abyssale

Bonjour,

L'exercice est très sympa et la solution plaisante.
Par contre, comment faire pour récupérer le contenu de Mon panier depuis un autre fichier ?
J'entends par là que dès que la selection est faite, en appuyant par exemple sur un troisième bouton "Envoyer" qui nous dirige vers un fichier afficher.php, on aurait à l'écran la selection qui s'affiche.

Je demande ça car ça fait 2 semaines que je ne parviens pas à le faire... :D
En fait j'ai utilisé un select multiple inclu dans un form mais dans afficher.php, il ne connaît plus rien du contenu du select ???
Merci.



je crois pas que c'est le bon endroit, mieux vaut créer un nouveau topic quand c'est comme ça. Et pour répondre à ta question je te conseillerai surtout de refaire un petit tour au tut PHP et plus particulièrement la section sur les formulaires ... là tu verras comment manipuler les select etc.
10 juillet 2012 à 14:39:57

C'est aussi le bon endroit puisque faisant directement suite au sujet.
Quant au traitement d'un formulaire en PHP, je connais.

Le problème n'est pas là. Simplement, comme indiqué, on dirait que le contenu du $_POST est toujours vide.
10 juillet 2012 à 16:11:47

Citation : Abyssale

C'est aussi le bon endroit puisque faisant directement suite au sujet.
Quant au traitement d'un formulaire en PHP, je connais.

Le problème n'est pas là. Simplement, comme indiqué, on dirait que le contenu du $_POST est toujours vide.



Euh ... je ne suis pas un devin non plus, sans au moins un petit bout de ton code on ne pourra pas grand chose pour toi ... et comme je l'ai dit je crois qu'un autre topic serait judicieux, celui-ci est censé traité d'un exercice de javascript et non d'un problème de HTML-PHP.
11 juillet 2012 à 9:01:19

Bin le code est celui de Desolation, auquel j'ai juste ajouté la balise form avec method = "post" et action = "afficher.php" ainsi qu'un bouton input permettant de valider le formulaire.
Comme je l'ai déjà indiqué, en appuyant sur le bouton valider, la page afficher.php, censée afficher les données contenues dans la variable $_POST n'affiche rien.
Donc, je suppose que les valeurs du select ne sont pas transmises "de javascript à PHP".
Mais n'y connaissant rien en javascript, je dois me tromper.
Ceci dit, je ne trouve pas la solution pour autant.
Je continu à chercher.

Citation : Desolation

Merci. :)

Je t'invite à regarder ceci.

11 juillet 2012 à 9:53:39

En fait, dans ce cas le javascript ne fait que améliorer les possibilités du HTML en rendant la page plus interactive, mais en l'occurence le formulaire est envoyer comme un form HTML classique ... sauf que là, vu qu'il n'a pas été prévu pour, l'auteur n'a pas mis d'attributs name ... or comme tu dois le savoir, c'est l'attribut 'name' qui va être récupérer dans POST ... l'attribut id ça sert uniquement au balises label ou au javascript, mais PHP s'en fout, lui ce qui l'intéresse c'est les attributs 'name' ...
11 juillet 2012 à 12:08:17

Tu as raison, mais j'avais déjà indiqué le name etc.

Bon, pour ceux que ça intéresse voici la solution qui fonctionne chez moi :D .

if (isset($_POST['nom']))
{
echo '<pre>';
print_r($_POST['nom']);
echo '</pre>';
}

echo '<form action = "'.$_SERVER["REQUEST_URI"].'" method = "POST">';
echo '<select name = "nom[]" id = "nom" multiple = "multiple">';
echo '<option value = "AAA">AAA</options>';

... les autres valeurs ...

echo '</select>';
echo '</form>';


Voilà, tout résidait dans le fait que l'action du form devait être $_SERVER["REQUEST_URI"] et non pas le nom d'un fichier "en dur".
11 juillet 2012 à 12:21:49

Le nom du fichier "en dur" marche normalement aussi bien ...
Et sinon, tu peu aussi ne pas renseigner d'attribut "action" et ça l'enverra vers la page en cous. Par contre je sais pas si c'est valide W3C.
30 janvier 2014 à 23:09:36

j'essaye de reprendre le code de Desolation avec un select dynamique (requete ajax) mais j'y arrive pas :(

alert($($sel.selector +' option:selected')); me donne [object Object] que faut il  changer ?

merci.

-
Edité par openzero 30 janvier 2014 à 23:41:10

1 février 2014 à 6:53:57

salut,

désolé pour le retard et pour faire resurgir de vieux sujet mais j'avais envie de m'y frotter et de publier ma version !!!!

donc voici mon code :

$(document).ready(function(){
		$('#liste_fruits').click(function(){
		    $('#ajouter').removeAttr('disabled');
		    $('#supprimer').attr('disabled','disabled');
		});
		$("#panier").click(function(){
		    $("#supprimer").removeAttr('disabled');
		    $("#ajouter").attr('disabled','disabled');
		});
		
		$("#ajouter").click(function(){
		    var value_sel_ajou = $("#liste_fruits option:selected").val();
		    var text_sel_ajou = $("#liste_fruits option:selected").text();
		    $('#panier').append(new Option(text_sel_ajou, value_sel_ajou));
		    $('#liste_fruits option[value='+value_sel_ajou+']').remove();
		});
		
		$("#supprimer").click(function(){
		    var value_sel_pan = $("#panier option:selected").val();
		    var text_sel_pan = $("#panier option:selected").text();
		    $('#panier option[value='+value_sel_pan+']').remove();
		    $("#liste_fruits").append(new Option(text_sel_pan,value_sel_pan));
		});
	    });

version en ligne : c'est par ici

[jQuery] Exercice pour s'entraîner

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown