1 pièce(s) jointe(s)
Plusieurs select avec en option des images (selection et affichage)
Bonjour tout le monde,
Je suis actuellement entrain de développer pour le plaisir(en local donc) un site marchand vendant des motos.
Pour cela l'utilisateur ajoute à son panier le ou les article(s) souhaités puis lorsqu'il va sur son panier il à la possibilité de choisir ou pas une coloris pour chacune des motos.
Ci-joint une visualisation de ce que l'utilisateur peux obtenir.
Pour réaliser ce que je souhaité, mes recherches sur internet m'ont permis de tomber sur un lien.
Mais cela fonctionne très bien pour le premier select mais pas les autres c'est à dire que lorsque je choisit une image dans le deuxième select rien ne s'affiche en tant que sélectionné.
Ci-dessous le code qui affiche la visualisation visible ci-joint :
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <link href="contenu/css/panier.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="contenu/js/panier.js"></script>
<form action="#" method="post">
<table>
<tr>
<td colspan="8" id="titre_panier">
Panier
</td>
</tr>
<tr id="sous_titre_paier">
<th><h4>Photos</h4></th> <!-- Création de la colonne "Photos" -->
<th><h4>Code</h4></th>
<!--<th><h4>Référence</h4></th>-->
<th><h4>Marque</h4></th> <!-- Création de la colonne "Marque" -->
<th><h4>Modele</h4></th> <!-- Création de la colonne "Modele" -->
<th><h4>Cylindre</h4></th> <!--Création de la colonne "Cylindre" -->
<th><h4>Coloris</h4></th>
<th><h4>Prix HT</h4></th> <!--Création de la colonne "Prix" -->
<th><h4>Quantité</h4></th>
<th><h4>Restant</h4></th>
<!-- <th><h4>Détail</h4></th> --> <!--Création de la colonne "Détail" -->
<!-- <th><h4>Commentaire</h4></th>-->
</tr>
<?php
// Permet l'ajout de tout article dans le tableau des articles
$TableauArticles=$LesArticles->getAll();
$i=0;
$k = 1;
foreach ($TableauArticles as $art)
{
$i=$i+1;
?>
<tr>
<input type="hidden" name="article[]" value="<?php echo $art[0] ?>"></input>
<input type="hidden" name="qte[]" value="1"></input>
<input type="hidden" name="categ[]" value="<?php echo $Lacategorie[0] ?>"></input>
<!-- Remplissage des colonnes en fonction des données de la base de données -->
<td>
<img src="<?php echo $art[7]; ?>" class="img"/>
</td>
<td class="contenu">
<a href="Index.php?action=categorie&choix=<?php echo $Lacategorie[1]; ?>" target="_blank" title="catégorie"><?php echo $Lacategorie[1] ?></a>
<a href="Index.php?action=detail_moto&art=<?php echo $art[0]; ?>" target="_blank" title="référence de l'article"><?php echo $art[0] ?></a>
</td>
<!--<td class="contenu">
<a href="Index.php?action=detail_moto&art=<?php echo $art[0]; ?>" target="_blank"><?php echo $art[0] ?></a>
</td>-->
<td class="contenu"><?php echo $art[3];?></td>
<td class="contenu"><?php echo $art[4];?></td>
<td class="contenu"><?php echo $art[5];?></td>
<td class="contenu">
<?php
unset($MesColoris);
if($art[6] != "0") {
$Coloris = explode(",", $art[6]);
for($j=0;$j<count($Coloris);$j++){
$coloris_article = R_moto_neuve::Coloris($Coloris[$j]);
$MesColoris[] = array($coloris_article);
}
?>
<select name="coloris" id="select" onchange="changer();">
<option value=""> </option>
<?php
foreach ($MesColoris as $coloris)
{
$libelle_coloris = R_moto_neuve::Libelle_Coloris($coloris[0]);
?>
<option style="background:url('<?php echo $coloris[0]; ?>') no-repeat; width:10px; height:10px;" value="<?php echo $coloris[0]; ?>" title="<?php echo $libelle_coloris; ?>"></option>
<?php
$k = $k+1;
}
?>
</select>
<?php
} else
?>
<span name="coloris<?php echo $i; ?>"> </span>
</td>
<td class="contenu"><?php echo $art[2];?></td>
<td>
<input type="text" name="quantite_panier<?php echo $i; ?>" class="quantite_panier" size="1" value="1"/>
</td>
<td class="contenu">
<span id="restant"><?php echo $art[8];?></span>
</td>
<td id="ajout_panier">
<a href="" name="retirer" title="Supprimer l'article de votre panier">
<img src="images_gabarit/cross.png"></img>
</a>
</td>
</tr>
<?php
}
?>
<tr>
<td colspan="8" id="valider">
<input type="image" src="images_gabarit/Valider3.jpg"></img>
</td>
</tr>
</table>
</form> |
Ci-dessous le code javascript utilisé :
Code:
1
2
3
4
| function changer() {
select = document.getElementById("select");
select.style.background = select.options[select.selectedIndex].style.background;
} |
Je pense que le problème vient du fait que j'utilise un id du select mais je voit pas comment je peux faire autrement pourtant j'ai essayé avec le name en tableau (name="coloris[]") mais c'étais loin d'être concluant.
Ma question c'est : Comment puis-je faire pour que je puisse sélectionner une image dans chacun des select en utilisant JQuery ?
Merci d'avance pour votre aide!!
