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
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../assets/css/panier.css">
<title>Page Title</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")
); ?>
<!-- SUPPLIER SELECT -->
<form method="post" action="">
<?php require('../Ecommerce/include/rec/supSelect.php'); ?>
</select> <input type="submit" onclick="this.form.submit();" class="btn" name="Envoi" id="Envoi" value="Afficher"><br>
<div class="tab-content" style="display: block;">
<?php require('../Ecommerce/include/rec/supSelect1.php'); ?>
</div>
<br><br>
<!-- COLORS -->
<div>
<!-- Couleur -->
<?php require('../Ecommerce/include/rec/artColors.php'); ?>
</select>
<!-- SIZE SELECT -->
<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>
<select name="S2" id="S2" multiple="multiple" class="selecColor">
<option value="rien">Mon choix...</option>
</select>
</div>
</form>
<!-- Script des tailles -->
<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> |