Faire des SELECT dynamiques

Version imprimable

09/01/2020, 10h29
Wawan4137

Faire des SELECT dynamiques

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!

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

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

09/01/2020, 15h08
Wawan4137

Merci pour votre réponse ! :mouarf:

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 ? ;)
09/01/2020, 15h10
Doksuri

pas besoin de html, je le cree a la volee directement dans le script
09/01/2020, 15h11
Wawan4137

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

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

voici ma page test complete

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
<!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>

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:

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é :oops: