Modification d'une liste de choix coté client

**cazadeis** · 04/12/2020, 10h58

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

**mathieu** · 04/12/2020, 12h07

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

**cazadeis** · 04/12/2020, 13h08

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A+

**NoSmoking** · 04/12/2020, 16h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 04/12/2020, 18h48

• Le fichier de test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mathieu** · 04/12/2020, 21h08

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

Modification d'une liste de choix coté client

JavaScript

Vue hybride

Discussions similaires

Partager

Partager