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

jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 13 sept. 2014 à 16:24 - Dernière réponse : jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention
- 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é.
Afficher la suite 

Votre réponse

14 réponses

jordane45 22107 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 13 sept. 2014 à 16:33
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 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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.
jordane45 22107 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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 )

jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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 ;-)
jordane45 22107 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention > jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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 ^^
jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention > jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 13 sept. 2014 à 19:33
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
KX 15679 Messages postés samedi 31 mai 2008Date d'inscriptionModérateurStatut 14 août 2018 Dernière intervention - 13 sept. 2014 à 18:37
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 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 13 sept. 2014 à 19:22
Merci je vais regarder ça.
Commenter la réponse de KX
jordane45 22107 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 13 sept. 2014 à 19:12
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 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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.
jordane45 22107 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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>
KX 15679 Messages postés samedi 31 mai 2008Date d'inscriptionModérateurStatut 14 août 2018 Dernière intervention - 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...
jordane45 22107 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 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>
jee pee 22583 Messages postés mercredi 2 mai 2007Date d'inscriptionModérateurStatut 18 août 2018 Dernière intervention - 13 sept. 2014 à 20:50
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.