Modification d'une liste de choix coté client

Version imprimable

04/12/2020, 10h58
cazadeis

Modification d'une liste de choix coté client

Bonjour,

je travaille sur un projet qui s'appuie sur le framework Django. Je produis des listes déroulantes contenant des choix issus d'une base de données. Django fait cela très bien.
En revanche, je souhaiterai pouvoir modifier les listes coté client pour n'afficher que les choix non affectés au fur à mesure des sélections de l'utilisateur.
Pouvez vous s'il vous plait me guider dans mes recherches ? A cette heure, je ne sais pas encore quelle techno utiliser pour résoudre ce problème. Tous les conseils sont donc les bienvenus.

Bonne journée
04/12/2020, 12h07
mathieu

il s'agit de liste de quoi ? et des choix de quoi ?
donnez nous des exemple des fonctionnalités utilisées par l'utilisateur.

Pour l'exemple on va prendre une liste de tournées de collecte.
Code:

1 2 3 4 5 6 7 <select name="Liste_1"> <option>Tournée A</option> <option>Tournée B</option> <option>Tournée C</option> </select>
Si je choisi l'item Tournée A, les listes suivantes contiendront les éléments suivants :
Code:

1 2 3 4 5 6 <select name="Liste_2"> <option>Tournée B</option> <option>Tournée C</option> </select>
A+

Bonjour,
il faut à partir du <select> source, et à chaque changement de choix, modifier le <select> destination en ne mettant que les <option> qui ne sont pas sélectionnées.

J'ai ce code en « stock »

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function updateSelect(oSrce, oDest) {
  // récup. <select> dest 
  const destValue = oDest.value;
  // get selection oSrce
  const ind = oSrce.selectedIndex;
  // vide le <select> dest
  oDest.options.length = 1;
  // création des options
  let i, nb = oSrce.options.length;
  let oOption;
  for (i = 1; i < nb; i += 1) {
    if (i !== ind) {
      // création de l'option méthode par clonage
      oOption = oSrce.options[i].cloneNode(true);
      // replace la selection
      if (oOption.value === destValue) {
        oOption.selected = true;
      }
      // ajout <option>
      oDest.add(oOption);
    }
  }
}
const selectSource = document.getElementById("id-select-source");
const selectDestination = document.getElementById("id-select-destnation");
selectSource.addEventListener("change", function() {
  updateSelect(this, selectDestination);
  selectDestination.focus();
});
// emplissage du <select> destination
updateSelect(selectSource, selectDestination);

qui fait le job. Si besoin je ferais un exemple complet.

L'exemple complet

• Le fichier de test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suppression d'un option déjà choisie</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2097652">
<meta name="description" content="Supprimer l'&lt;option&gt; déjà choisie d'un &lt;select&gt; dans un autre &lt;select&gt; lié.">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
time {
  float: right;
  margin: .5em;
  font-size: 0.9em;
  color: #888;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
section {
  position: relative;
  margin: 0 2em 1em;
}
.row {
  display: inline-flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
select {
  height: 2em;
  margin: 0 1em;
  min-width: 20em;
  font: inherit;
  line-height: 2em;
  border: 1px solid #CCC;
}
select option:first-child {
  font-style: italic;
  color: #CCC;
}
code {
  font-family: Courier New;
  color: #905;
  background: #F5F2F0;
}
code:before {
  content: "\003C";
  color: #999;
}
code:after {
  content: "\003E";
  color: #999;
}
</style>
</head>
<body>
<main>
  <header>
    <time datetime="2020-12-04">Déc. 2020</time>
    <h1>Suppression d'un option déjà choisie</h1>
  </header>
  <section class="row">
    <div>
      <h2>Départ</h2>
      <select id="id-select-source">
        <option selected>Gare de départ</option>
        <option value="gare-1">Bordeaux</option>
        <option value="gare-2">Grenoble</option>
        <option value="gare-3">Lille</option>
        <option value="gare-4">Lyon</option>
        <option value="gare-5">Marseille</option>
        <option value="gare-6">Nantes</option>
        <option value="gare-7">Paris</option>
      </select>
    </div>
    <div>
      <h2>Arrivée</h2>
      <select id="id-select-destnation">
        <option>Gare d'arrivée</option>
      </select>
    </div>
  </section>
  <section>
    <h2>Fonctionnement</h2>
    <p>Au départ les deux <code>select</code> sont emplis avec les mêmes <code>option</code> autorisant le premier choix dans l'un ou l'autre.</p>
    <p>Après sélection dans le <code>select</code> de gauche, l'<code>option</code> choisie  n'est plus disponible dans le <code>select</code> de droite.</p>
    <p>Si l'<code>option</code> choisie dans le <code>select</code> de gauche est la même que celle préalablement choisie dans le <code>select</code> de droite l'<code>option</code> est de fait supprimée dans le <code>select</code> de droite.</p>
  </section>
  <footer>
    <p>Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2097652">discussion sur Developpez.com</a>
  </footer>
</main>
<script>
function updateSelect(oSrce, oDest) {
  // récup. <select> dest
  const destValue = oDest.value;
  // get selection oSrce
  const ind = oSrce.selectedIndex;
  // vide le <select> dest
  oDest.options.length = 1;
  // création des options
  let i, nb = oSrce.options.length;
  let oOption;
  for (i = 1; i < nb; i += 1) {
    if (i !== ind) {
      // création de l'option méthode par clonage
      oOption = oSrce.options[i].cloneNode(true);
      // replace la selection
      if (oOption.value === destValue) {
        oOption.selected = true;
      }
      // ajout <option>
      oDest.add(oOption);
    }
  }
}
const selectSource = document.getElementById("id-select-source");
const selectDestination = document.getElementById("id-select-destnation");
selectSource.addEventListener("change", function() {
  updateSelect(this, selectDestination);
  selectDestination.focus();
});
// emplissage du <select> destination
updateSelect(selectSource, selectDestination);
</script>
</body>
</html>

• Le fichier en ligne : Suppression d'un option déjà choisie

04/12/2020, 21h08
mathieu

suivant le nombre d'éléments à afficher sur l'écran, vous pouvez aussi proposer une interface à base de glisser-déposer comme cela par exemple :
https://jqueryui.com/droppable/#photo-manager
05/12/2020, 06h50
cazadeis

Merci beaucoup, c'est tout à fait ce que je souhaite faire.

Peut-être pas grand chose à voir mais c'est juste pour l'expérience: usine à gaz pour des sélections successives:

http://javatwist.imingo.net/choixsuccessifs.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
select{margin:20px;}
:disabled{opacity:0.1;}
form{display:flex;}
strong{display:block;margin:20px;}
</style>
 
</head>
<body>
 
<strong>Indiquez vos préférences.</strong>
 
<form id="f">
<fieldset>
<legend>Choix 1</legend>
<select name="Liste_1" size="6">
	<option value="1">Tournée A</option>
	<option value="2">Tournée B</option>
	<option value="3">Tournée C</option>
	<option value="4">Tournée D</option>
	<option value="5">Tournée E</option>
	<option value="6">Tournée F</option>
</select>
</fieldset>
<fieldset>
<legend>Choix 2</legend>
<select disabled="true" name="Liste_2" size="6">
	<option value="1">Tournée A</option>
	<option value="2">Tournée B</option>
	<option value="3">Tournée C</option>
	<option value="4">Tournée D</option>
	<option value="5">Tournée E</option>
	<option value="6">Tournée F</option>
</select>
</fieldset>
<fieldset>
<legend>Choix 3</legend>
<select disabled="true" name="Liste_3" size="6">
	<option value="1">Tournée A</option>
	<option value="2">Tournée B</option>
	<option value="3">Tournée C</option>
	<option value="4">Tournée D</option>
	<option value="5">Tournée E</option>
	<option value="6">Tournée F</option>
</select>
</fieldset>
<fieldset>
<legend>Choix 4</legend>
<select disabled="true" name="Liste_4" size="6">
	<option value="1">Tournée A</option>
	<option value="2">Tournée B</option>
	<option value="3">Tournée C</option>
	<option value="4">Tournée D</option>
	<option value="5">Tournée E</option>
	<option value="6">Tournée F</option>
</select>
</fieldset>
</form>
 
<script>
document.querySelectorAll("[name^=Liste]").forEach((v,i,t)=>{
        v.addEventListener("change",()=>{
                if(i<t.length-1){
                        for(let k=1;k<t.length-i;k++){
                                if(t[i+k]){t[i+k].disabled=true};
                                for(let j=0;j<v.options.length;j++){
                                        t[i+k].options[j].disabled=v.options[j].disabled;
                                        t[i+k].value=-1;
                                        if(t[i+k].options[j].value==v.value){
                                                t[i+k].options[j].disabled=true;
                                        }
                                }
                        }
                };
                if(t[i+1])t[i+1].disabled=false;                
 
        })
})
 
</script>
 
</body>
</html>

16/12/2020, 21h40
cazadeis

1 pièce(s) jointe(s)

Bonjour,

grâce à vos propositions j'ai bien avancé dans mon projet de listes modifiées coté client. Le code est en PJ. Le comportement des listes déroulantes est étrange. Il faut dérouler plusieurs fois une liste pour que le résultat final souhaité soit obtenu. Je suis débutant en JS, j'ai surement loupé un truc. Pouvez vous s'il vous plait me donner votre avis ?

A+

Pièce jointe 586815
16/12/2020, 22h50
javatwister

Le problème c'est que je ne comprends pas ton interface ni ton besoin réel... Ce serait tellement plus simple avec une description complète de ton objectif;
17/12/2020, 08h54
cazadeis

Bonjour,

En fait je tente de réaliser un planning de tournées de collecte. Le principe de base pour l'ensemble des listes déroulantes est que lorsqu'une valeur est sélectionnée elle ne peut pas l'être une nouvelle fois. Si j'affecte le chauffeur X à la tournée Y, je ne dois pas pouvoir l'affecter également à la tournée Z. Idem pour les tournées entre elles.

Bonne journée.

Un peu plus réaliste peut-être, même si je ne mets que 3 paramètres. Imaginons une entreprise de transport bidon.
Le principe est de valider de haut en bas les tournées, ce qui n'est pas plus débile que ça puisque, s'il n'y a pas de première tournée choisie, je ne vois pas pourquoi il y en aurait une 2ème...
Quand une tournée est validée, les données s'affichent (Parcours, Chauffeur, Camion) et tu sais que tu peux les envoyer au serveur.

http://javatwist.imingo.net/choixsuccessifs.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
select{margin:20px;}
option:disabled{opacity:0.1;}
select:disabled{opacity:0.1;}
fieldset{border:none;display:flex;align-items:flex-start;flex-direction:column;margin:2px;}
.truc{display:flex;align-items:center;}
form{display:flex;align-items:center;margin:2px;}
strong{display:block;margin:20px;}
 
</style>
 
</head>
<body>
 
<strong>Planning des tournées.</strong>
 
<form id="f">
	<fieldset>
		<div class="truc">
			<div>Tournée 1</div>
			<select name="Tour_1" size="6">
				<option value="Megève">Megève</option>
				<option value="Vimoutiers">Vimoutiers</option>
				<option value="Tarbes">Tarbes</option>
				<option value="Singapour">Singapour</option>
				<option value="Foix">Foix</option>
				<option value="Gibraltar">Gibraltar</option>
			</select>
		</div>
		<div class="truc">
			<div>Tournée 2</div>
			<select disabled="true" name="Tour_2" size="6">
				<option value="Megève">Megève</option>
				<option value="Vimoutiers">Vimoutiers</option>
				<option value="Tarbes">Tarbes</option>
				<option value="Singapour">Singapour</option>
				<option value="Foix">Foix</option>
				<option value="Gibraltar">Gibraltar</option>
			</select>
		</div>
		<div class="truc">
			<div>Tournée 3</div>
			<select disabled="true" name="Tour_3" size="6">
				<option value="Megève">Megève</option>
				<option value="Vimoutiers">Vimoutiers</option>
				<option value="Tarbes">Tarbes</option>
				<option value="Singapour">Singapour</option>
				<option value="Foix">Foix</option>
				<option value="Gibraltar">Gibraltar</option>
			</select>
		</div>
		<div class="truc">
			<div>Tournée 4</div>
			<select disabled="true" name="Tour_4" size="6">
				<option value="Megève">Megève</option>
				<option value="Vimoutiers">Vimoutiers</option>
				<option value="Tarbes">Tarbes</option>
				<option value="Singapour">Singapour</option>
				<option value="Foix">Foix</option>
				<option value="Gibraltar">Gibraltar</option>
			</select>
		</div>
	</fieldset>
	<fieldset>
		<select name="Chauffe_1" size="6">
			<option value="Georges">Georges</option>
			<option value="Gilbert">Gilbert</option>
			<option value="Gédéon">Gédéon</option>
			<option value="Godefroy">Godefroy</option>
			<option value="Gina">Gina</option>
			<option value="Greystoke">Greystoke</option>
		</select>
		<select disabled="true" name="Chauffe_2" size="6">
			<option value="Georges">Georges</option>
			<option value="Gilbert">Gilbert</option>
			<option value="Gédéon">Gédéon</option>
			<option value="Godefroy">Godefroy</option>
			<option value="Gina">Gina</option>
			<option value="Greystoke">Greystoke</option>
		</select>
		<select disabled="true" name="Chauffe_3" size="6">
			<option value="Georges">Georges</option>
			<option value="Gilbert">Gilbert</option>
			<option value="Gédéon">Gédéon</option>
			<option value="Godefroy">Godefroy</option>
			<option value="Gina">Gina</option>
			<option value="Greystoke">Greystoke</option>
		</select>
		<select disabled="true" name="Chauffe_4" size="6">
			<option value="Georges">Georges</option>
			<option value="Gilbert">Gilbert</option>
			<option value="Gédéon">Gédéon</option>
			<option value="Godefroy">Godefroy</option>
			<option value="Gina">Gina</option>
			<option value="Greystoke">Greystoke</option>
		</select>
	</fieldset>
	<fieldset>
		<div class="truc">
			<select name="Camion_1" size="6">
				<option value="Iveco">Iveco</option>
				<option value="Tesla">Tesla</option>
				<option value="Scania">Scania</option>
				<option value="Berliet">Berliet</option>
				<option value="Twingo">Twingo</option>
				<option value="Kenworth">Kenworth</option>
			</select>
			<div id="total1">En attente</div>
		</div>
		<div class="truc">
			<select disabled="true" name="Camion_2" size="6">
				<option value="Iveco">Iveco</option>
				<option value="Tesla">Tesla</option>
				<option value="Scania">Scania</option>
				<option value="Berliet">Berliet</option>
				<option value="Twingo">Twingo</option>
				<option value="Kenworth">Kenworth</option>
			</select>
			<div id="total2">En attente</div>
		</div>
		<div class="truc">
			<select disabled="true" name="Camion_3" size="6">
				<option value="Iveco">Iveco</option>
				<option value="Tesla">Tesla</option>
				<option value="Scania">Scania</option>
				<option value="Berliet">Berliet</option>
				<option value="Twingo">Twingo</option>
				<option value="Kenworth">Kenworth</option>
			</select>
			<div id="total3">En attente</div>
		</div>
		<div class="truc">
			<select disabled="true" name="Camion_4" size="6">
				<option value="Iveco">Iveco</option>
				<option value="Tesla">Tesla</option>
				<option value="Scania">Scania</option>
				<option value="Berliet">Berliet</option>
				<option value="Twingo">Twingo</option>
				<option value="Kenworth">Kenworth</option>
			</select>
			<div id="total4">En attente</div>
		</div>
	</fieldset>
</form>
 
<script>
 
document.querySelectorAll("select").forEach((e,_,s)=>{
        document.querySelectorAll("[name^="+e.name.slice(0,2)+"]").forEach((v,i,t)=>{
                v.addEventListener("change",()=>{
                        if(i<t.length-1){
                                for(let k=1;k<t.length-i;k++){
                                        if(t[i+k]){t[i+k].disabled=true};
                                        document.getElementById("total"+(i+k+1)).textContent="En attente";
                                        for(let j=0;j<v.length;j++){
                                                t[i+k][j].disabled=v[j].disabled;
                                                t[i+k].value=-1;
                                                if(t[i+k][j].value==v.value){t[i+k][j].disabled=true}
                                        }
                                }
                        };
                        if(t[i+1]){t[i+1].disabled=false};
                                if(s[i+4] && s[i+8] && s[i].value && s[i+4].value && s[i+8].value){
                                        document.getElementById("total"+(i+1)).textContent=`Validé:  
                                        ${s[i+4].value} ira à ${s[i].value} en ${s[i+8].value}.`;
                        }
                        else{document.getElementById("total"+(i+1)).textContent="En attente"};
                })
        })
})
 
</script>
 
</body>
</html>

18/12/2020, 19h51
cazadeis

Merci Javatwister pour tes propositions, ça me donne d'autres idées. J'apprécie aussi vraiment le choix des villes du SO ;)