Sujet Précédent Sujet Suivant

Restriction sur sous-liste, javascript la solution ?

Résolu
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 - Modifié par jee pee le 13/09/2014 à 16:25
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 - 13 sept. 2014 à 20:50
Bonjour,

Je souhaiterais savoir si javascript, que je ne connais pas du tout, pourrait répondre à ma problématique. Je ne cherche pas nécessairement la solution, juste à savoir si javascript est adapté.

J'ai un formulaire html avec 2 choix sur liste. La seconde liste est liée à la première. 

<form action="choix.htx" method="get">

Marque : 
<select name="marque">
<option></option>
<option  value=1>Citroën
<option  value=2>Renault
</select>
<br />

Modèle : 
<select name="modele" >
<option></option>
<option  value=1,1>Citroën C1
<option  value=1,2>Citroën C3
<option  value=2,8>Renault Twingo
<option  value=2,9>Renault Clio
</select>
<br />

<input type="submit" value="Valider">
</form>

Le javascript, code s'exécutant localement dans le navigateur de l'utilisateur, peut-il faire une restriction sur la seconde liste : ne proposer que les éléments correspondants à la première liste quand un élément de cette liste est sélectionné. La restriction pouvant s'effectuer sur l'intitulé, mais c'est mieux si c'est sur la valeur de liste associée.

Cordialement, merci.
        Un étranger, c'est un ami qu'on n'a pas encore rencontré.

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
13 sept. 2014 à 16:33
Bonjour,

Je souhaiterais savoir si javascript, que je ne connais pas du tout, pourrait répondre à ma problématique. [...] peut-il faire une restriction sur la seconde liste : ne proposer que les éléments correspondants à la première liste quand un élément de cette liste est sélectionné

La réponse est OUI

Déjà... pour que cette "actualisation" puisse se faire... il faut que tu regardes sur la méthode: Onchange

Après... pour trouver des exemples... google est là ^^
http://lmgtfy.com/?q=javascript+listes+li%C3%A9es

Après.... tu peux aussi, si tu utilises une BDD, utiliser de l' AJAX pour actualiser ta liste...



0
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 2
13 sept. 2014 à 16:54
Merci beaucoup. Je vais pouvoir creuser dans cette direction. Je ne souhaitais pas me lancer pour aboutir sur une impasse.

Après ta suggestion Ajax pourrais aussi m'intéresser. Pour les listes, ou autre-choses.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
13 sept. 2014 à 17:35
Disons que tout dépend des tes besoins..

Pour des "petites" listes déroulantes dont le contenu est "FIXE" ... tu n'auras pas besoin d'ajax...
Mais dès que tes listes commencent à être conséquentes et que tes infos sont stockées en base de données... Ajax est redoutable ^^
Si tu te mets au dev web... pour ce qui est du javascript je te conseil de commencer à regarder le Jquery
Même si c'est interessent (et parfois utile) de comprendre les "bases" (en utilisant du "pur" javascript)... jquery facilite grandement l'écriture de code....
Mais il te faut connaitre également le fonctionnement d'une page web... son contenu.... et donc sa manipulation...( le DOM )

0
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 2
13 sept. 2014 à 17:56
J'ai regardé les 3 premières pages de la recherche Google, impeccable, on comprend bien.

Je n'ai pas toutes les bases indispensables du web (le DOM ?). J'ai démarré l'informatique avec des ordinateurs sans écran, en assembleur sur cartes perforées pour gérer des données en tri/fusion depuis des lecteurs de bandes ;-)
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344 > jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024
13 sept. 2014 à 18:16
(le DOM ?)
DOM : Document Object Model
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

'ai démarré l'informatique avec des ordinateurs sans écran, en assembleur sur cartes perforées pour gérer des données en tri/fusion depuis des lecteurs de bandes ;-)
Autant dire que tu as commencé au siècle dernier ^^
0
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 2 > jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024
Modifié par jee pee le 13/09/2014 à 19:34
Au millénaire précédent tu peux dire :-)

40 ans, j'ai écris mon premier programme en 1974 sur cette machine : Olivetti Programma 101
0
Réponse 2 / 3
KX Messages postés 16734 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 24 avril 2024 127
13 sept. 2014 à 18:37
Bonjour,

Dans tous les cas au final ce sera du JavaScript sur une page web...

Il y a quelques temps j'ai fait un tutoriel de présentation sur AngularJs :
Premiers pas avec AngularJs

Ton problème est typiquement du genre de ceux pour lesquels AngularJS est fait. Voici un exemple complet, si y a des questions je suis pas loin :-) 

<!doctype html>
<html ng-app="App">
<head>
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script>
	var App = angular.module('App', []);
	App.controller('Ctrl', function ($scope) {
		
		// Ici tu mets tes données
		var lists = $scope.lists = [{brand:'Citroën', models:['C1','C3']}, {brand:'Renault', models:['Twingo','Clio']}];
		
		// On initialise par défaut le premier élément de chaque liste ('Citroën' et 'C1' ici)
		var data = $scope.data = lists[0]; // {brand:'Citroën',models:['C1','C3']}
		var brand = $scope.brand = data.brand; // 'Citroën'
		var model = $scope.model = data.models[0]; // 'C1'
	});
    </script>

</head>
<body ng-controller="Ctrl">
    
    <h3>Choisissez votre marque et votre modèle</h3>

    <!-- Le select sur les marques -->
    <select ng-model="data" ng-options="data.brand for data in lists"
        ng-change="brand=data.brand; model=data.models[0]"></select> <!-- quand il change on initialise le deuxième select avec le premier modèle -->
    
    <!-- Le select sur les modèles, qui prend ses données selon le choix fait dans le premier select -->
    <select ng-model="model" ng-options="model for model in data.models"></select>
    
    <h3>Vous avez choisi : </h3>
    
    <!-- On affiche le tout -->
    {{brand}} {{model}}
</body>
</html>
0
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 2
13 sept. 2014 à 19:22
Merci je vais regarder ça.
0
Réponse 3 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
13 sept. 2014 à 19:12
Quit à parler de plugin... il y a aussi le plugin : Chained (jquery).
Celui se base sur les "CLASS" pour lier deux listes (select)

http://www.jqueryscript.net/download/Simple-jQuery-Plugin-For-Chained-Selects-Chained.zip


Pour les exemples d'utilisation, je t'invite à aller sur les sites :
http://www.jqueryscript.net/form/Simple-jQuery-Plugin-For-Chained-Selects-Chained.html
ou
http://www.scoco.fr/listes-deroulantes-liees-avec-chained-selects-jquery/


Après pour AJAX... il existe un bon exemple ici :
http://chez-syl.fr/2012/02/jquery-remplir-une-liste-deroulante-selon-une-autre-liste/
0
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 2
13 sept. 2014 à 19:27
Cela peut être un plus. Dans les exemples que j'ai vu, le script et les données de la seconde liste sont dans le <head> de la page web. Le script ok, mais pour les données c'est plus gênant car sur mon site, l'entête de la page (et le pied de page) sont des constantes. L'entête contenant le <head> et le haut du <body> (bannière, barre de menu ...). Là dans le plugin cela utilise une liste de second niveau avec une syntaxe particulière.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
13 sept. 2014 à 20:02
Dans les exemples que j'ai vu, le script et les données de la seconde liste sont dans le <head> de la page web
Là comme ça ... je ne sais pas de quels exemples tu parles...

Quoi qu'il en soit.. il n'y a aucune obligation à mettre tes scripts (et les données) dans le Head.
Le tout.. c'est que le script et les données EXISTENT avant d'être appelés dans ta page...

Par exemple : 
<html>
<head>
  <title> TEST </title>
</head>

<body>

<script  type="text/javascript">
function maZoliFonction(elm){
 alert("Le select \n id=" + elm.id + "\n Name = "+elm.name +" \nretourne la valeur:"+elm.value);
}
</script>

<select name="test" id="idduselect" onchange="maZoliFonction(this)">
<option value=""> Merci de faire un choix </option>
<option value ="1"> Premier choix</option>
<option value ="Deux"> deuxieme choix</option>
<option value ="3"> Troisieme choix</option>
</select>

</body>
</html>
0
KX Messages postés 16734 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 24 avril 2024 127
13 sept. 2014 à 20:14
"il n'y a aucune obligation à mettre tes scripts (et les données) dans le Head."
D'ailleurs, pour des questions de performances, les recommandations seraient plutôt de mettre les scripts à la fin du body...
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
13 sept. 2014 à 20:48
les recommandations seraient plutôt de mettre les scripts à la fin du body...
Lorsque l'on peut oui... mais parfois il est nécessaire que les script soient accessible au moment où la page est générée (ou PENDANT qu'elle est générée)... et donc dans ce cas le script (la fonction) doit existe AVANT son appel dans la page. 

<html>
<head>
  <title> TEST </title>
</head>

<body>

<script  type="text/javascript">
function fonction1(elm){
  document.getElementById(elm).value="test1";
 }
</script>

Je vais remplir les input via un script JS :
<input id="inp1" value="" type="text">
<script  type="text/javascript">
 // là ça marche....
 fonction1("inp1");
</script>
<input id="inp2" value="" type="text">
<script  type="text/javascript">
// Là ça ne marche pas
// et ça met une erreur...
// ReferenceError: fonction2 is not defined
// fonction2("inp2");
 fonction2("inp2");
</script>



</body>
</html>

<script  type="text/javascript">
function fonction2(elm){
 document.getElementById(elm).value="test2";
 }
</script>
0
jee pee Messages postés 39634 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 25 avril 2024 2
13 sept. 2014 à 20:50
Ok, avec vos réponses je pense que j'ai de quoi travailler le sujet.

Merci.
0

Discussions similaires

Debug DLL
galax98 -
galax98 -

30 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
parcourir une liste en java
imenmannou -
DARKSIDIOUS -

2 réponses
Listing des marques et modéle de voiture
tibine974 -
Nidalbae -

41 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
Rejoignez-nous