Faire des SELECT dynamiques

**Wawan4137** · 09/01/2020, 10h29

Bonjour,

Je suis en train de développer un site web et dans un formulaire j'aimerai avoir 3 select avec tous les mêmes options mais j'aimerai pouvoir faire en sorte que quand l'utilisateur choisi une option dans l'un de ces 3 selects, elle soit supprimée des 2 autres afin d'éviter les doublons.
Quelqu'un saurait il m'aider sur la façon de faire ? J'ai vu qu'en Ajax on pouvait faire en sorte de supprimer des options mais je ne sais pas comment m'y prendre pour savoir quel serait le déclancheur, surtout que si l'utilisateur change d'avis, j'aimerai que l'option réapparaisse dans le formulaire

Merci d'avance pour votre aide!

**Doksuri** · 09/01/2020, 15h00

j'ai trouve l'exercice sympas : voici ma copie

Code javascript :

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
const items = ['-----', 'toto', 'tata', 'titi', 'a', 'b', 'c'];
function populateList(n) {
    const sel = document.createElement('select');
    sel.id = `select_${n}`;
    sel.name = `select_${n}`;
    sel.dataset.listNumber = n;
    items.forEach(el => {
        const opt = document.createElement('option');
        opt.textContent = el;
        opt.value = el;
        sel.appendChild(opt);
    });
    document.body.appendChild(sel);
    sel.addEventListener('change', updateOtherLists);
}
function updateOtherLists() {
    let sel;
    try {
        sel = document.getElementById(`select_${parseInt(this.dataset.listNumber)+1}`);
        if(!sel) {
            throw 'element doesn t exist';
        }
    } catch (e) { return false; }
    sel.options.length = 0;
    for(let i=0; i<this.options.length; ++i) {
        el = this.options[i].value;
        if(el !== this.value) {
            const opt = document.createElement('option');
            opt.textContent = el;
            opt.value = el;
            sel.appendChild(opt);
        }
    }
}
populateList(1);
populateList(2);
populateList(3);

ps : l'ajax sert a recuperer un retour du serveur... je ne sais pas si c'est que ce tu voulais pour ton exercice

**Wawan4137** · 09/01/2020, 15h08

Merci pour votre réponse !

Auriez vous par hasard le code HTML qui va avec votre script que je puisse le tester afin de l'adapter à mon code s'il vous plait ?

**Doksuri** · 09/01/2020, 15h10

pas besoin de html, je le cree a la volee directement dans le script

**Wawan4137** · 09/01/2020, 15h11

Pourtant quand je met votre code sur une page, celle-ci ne m'affiche rien

**Doksuri** · 09/01/2020, 15h16

le html se rajoute au body (a la fin de la page)

voici ma page test complete

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>selects</title>
</head>
<body>
    <script type="text/javascript">
const items = ['-----', 'toto', 'tata', 'titi', 'a', 'b', 'c'];
function populateList(n) {
    const sel = document.createElement('select');
    sel.id = `select_${n}`;
    sel.name = `select_${n}`;
    sel.dataset.listNumber = n;
    items.forEach(el => {
        const opt = document.createElement('option');
        opt.textContent = el;
        opt.value = el;
        sel.appendChild(opt);
    });
    document.body.appendChild(sel);
    sel.addEventListener('change', updateOtherLists);
}
function updateOtherLists() {
    let sel;
    try {
        sel = document.getElementById(`select_${parseInt(this.dataset.listNumber)+1}`);
        if(!sel) {
            throw 'element doesn t exist';
        }
    } catch (e) { return false; }
    sel.options.length = 0;
    for(let i=0; i<this.options.length; ++i) {
        el = this.options[i].value;
        if(el !== this.value) {
            const opt = document.createElement('option');
            opt.textContent = el;
            opt.value = el;
            sel.appendChild(opt);
        }
    }
}
populateList(1);
populateList(2);
populateList(3);
    </script>
</body>
</html>

**Wawan4137** · 09/01/2020, 16h20

Rebonsoir !
Apres de moultes réflexions j'ai fini par trouver la solution par moi même ! je vous la transmet au cas où quelqu'un serait intéressé :p

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
32
33
34
35
36
37
38
39
40
41
42
43
44
 
var lastsp1, lastsp2, lastsp3;
 
document.getElementById('sp1Select').addEventListener('change', function (e){
	if(lastsp1 != null){
		document.getElementById('sp2Select').options[lastsp1].style.display = 'contents'
		document.getElementById('sp3Select').options[lastsp1].style.display = 'contents' 
	}
 
	var x = document.getElementById('sp1Select').selectedIndex;
 
	document.getElementById('sp2Select').options[x].style.display = 'none';
	document.getElementById('sp3Select').options[x].style.display = 'none';
	lastsp1 = x;
 
}) 
 
document.getElementById('sp2Select').addEventListener('change', function (e){
	if(lastsp2 != null){
		document.getElementById('sp1Select').options[lastsp2].style.display = 'contents'
		document.getElementById('sp3Select').options[lastsp2].style.display = 'contents' 
	}
 
	var x = document.getElementById('sp2Select').selectedIndex;
 
	document.getElementById('sp1Select').options[x].style.display = 'none';
	document.getElementById('sp3Select').options[x].style.display = 'none';
	lastsp2 = x;
 
}) 
 
document.getElementById('sp3Select').addEventListener('change', function (e){
	if(lastsp3 != null){
		document.getElementById('sp1Select').options[lastsp3].style.display = 'contents'
		document.getElementById('sp2Select').options[lastsp3].style.display = 'contents' 
	}
 
	var x = document.getElementById('sp3Select').selectedIndex;
 
	document.getElementById('sp1Select').options[x].style.display = 'none';
	document.getElementById('sp2Select').options[x].style.display = 'none';
	lastsp3 = x;
 
})

Merci encore de m'avoir aidé

Faire des SELECT dynamiques

JavaScript

Discussions similaires

Partager

Partager