Bonjour,

Le code ci-dessous fonctionne mais je n'arrive pas à trouver comment faire pour transformer la liste en case à cocher.
L'idée étant de laisser le choix de sélectionner une ou plusieurs tailles
Pourriez vous me donner une idée
Bien à vous

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
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
<?php $p2 = array(
    "S-XXXL" => array("S", "M", "L", "XL", "XXL", "XXXL"),
    "34-48" => array("34", "36", "38", "40", "42", "44", "46", "48"),
    "50-64" => array("50", "52", "54", "56", "58", "60", "62", "64"),
    "TU" => array("TU"),
    "KG" => array("GR", "KG", "ML", "CL", "DL", "LITRE")
); ?>
<form method="post" action="">
    <select name="monSelect" onchange="changeSelect(this);">
        <option value="S-XXXL">S-XXXL</option>
        <option value="34-48">34-48</option>
        <option value="50-64">50-64</option>
        <option value="TU">TU</option>
        <option value="KG">KG</option>
    </select><br><br>
 
    <select name="S2" id="S2" style="width: 100px;height:180px" multiple="multiple" class="selecColor">
        <option value="rien">Mon choix...</option>
    </select><br><br>
 
</form>
<script>
    function changeSelect(selected) {
        //on recupere le php
        var data = <?php echo json_encode($p2); ?>;
        console.log("selected.value : " + selected.value + ", data[selected.value] : " + data[selected.value]);
        var S2 = document.getElementById("S2");
        //on efface tous les children options
        while (S2.firstChild) {
            S2.removeChild(S2.firstChild);
        }
        //on rajoute les nouveaux children options
        for (var chaqueSousTitre of data[selected.value]) {
            var opt = document.createElement("option");
            opt.value = chaqueSousTitre;
            opt.innerHTML = chaqueSousTitre;
            S2.appendChild(opt);
        }
    }
</script>
</body>
</html>