Restriction sur sous-liste, javascript la solution ? [Résolu]

Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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é.
Afficher la suite 

Votre réponse

3 réponses

Messages postés
23550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
0
Merci
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...



jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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.
jordane45
Messages postés
23550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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 )

jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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 ;-)
jordane45
Messages postés
23550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
> jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
(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 ^^
jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
> jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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
Commenter la réponse de jordane45
Messages postés
15854
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
7 décembre 2018
0
Merci
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>

jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
Merci je vais regarder ça.
Commenter la réponse de KX
Messages postés
23550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
0
Merci
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/
jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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.
jordane45
Messages postés
23550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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>
KX
Messages postés
15854
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
7 décembre 2018
-
"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...
jordane45
Messages postés
23550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
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>
jee pee
Messages postés
23675
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
9 décembre 2018
-
Ok, avec vos réponses je pense que j'ai de quoi travailler le sujet.

Merci.
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.