De la manipulation des listes déroulantes
Bonjour à tous,
j'ai quelques opérations à faire sur des <select>, en particulier une modification du contenu de la liste déroulante. Ci-dessous deux méthodes : la première modifie le contenu de la liste sur l'évenement onclick d'un bouton associé, la seconde modifie le contenu de la liste sur l'événement onclick de la liste elle-même :
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
|
<h2>Remplissage dynamique par clic sur bouton avec nettoyage de la liste</h2>
<select id='sel1a'>
<option value='0'>option 0</option>
<option value='10'>ligne à supprimer</option>
</select>
<button onclick="fillSelect1a()">Remplir</button>
<script language="javascript" type="text/javascript"><!--
function fillSelect1a() {
var sel = document.getElementById('sel1a');
sel.options.length = 1;
sel.options[sel.options.length] = new Option('option 1', 1);
sel.options[sel.options.length] = new Option('option 2', 2);
sel.options[sel.options.length] = new Option('option 3', 3);
sel.options[sel.options.length] = new Option('option 4', 4);
}
--></script>
<h2>Remplissage dynamique sur événement onclick avec nettoyage de la liste</h2>
<select id='sel2b' onclick='fillSelect2b();return true'>
<option value='0'>option 0</option>
<option value='10'>ligne à virer</option>
</select>
<script language="javascript" type="text/javascript"><!--
function fillSelect2b() {
var sel = document.getElementById('sel2b');
sel.options.length = 1;
sel.options[sel.options.length] = new Option('option 1', 1);
sel.options[sel.options.length] = new Option('option 2', 2);
sel.options[sel.options.length] = new Option('option 3', 3);
sel.options[sel.options.length] = new Option('option 4', 4);
}
--></script> |
Dans les deux cas, le contenu de la liste déroulante est correctement mis à jour. Cependant, si je clique sur, disons, la ligne 'option 2'
- dans le premier cas, la ligne reste sélectionnée dans la combo (comportement normal)
- dans le second cas, la sélection reste bloquée sur la première ligne... :?
Petit bémol sur le second cas : si je recherche quelle est la ligne sélectionnée en interceptant le onchange du <select>, je trouve bien celle contenant 'option 2'. La sélection est donc correctement transmise mais elle se perd...
Pourquoi ? 8O
