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'<option> déjà choisie d'un <select> dans un autre <select> 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> |
Modification d'une liste de choix coté client
Répondre avec citation
Partager