2 champs sql ds un même option value ??


Bonjour, j'ai eu récemment de l'aide qui m'a été précieuse sur ce forum donc je me lance pour une deuxième question:

contexte: j'ai une table sql nommé Clubs dans laquelle j'ai 2 champs: logo et club.
Sur ma page PHP j'ai un bouton select (déroulant).

donc ma question est comment pourrais-je appeler ces deux champs sur le même option value de mon bouton.

ex:

EQUIPE:(choix déroulant)
admettons que je choisisse 'France' je voudrais que sur le choix de mon bouton cela m'affiche :
drapeau de la France.jpg (champs logo) - France (champs club)

voici le code de mon bouton pour un seul champs:

$cl =$bdd->prepare('SELECT club FROM clubs') or die(print_r($bdd->errorInfo()));
$cl->execute(array());

<td>EQUIPE</td><td><?php echo '<select name="envoi_equipe1" size=1>';
while ($donne = $cl->fetch())
{
echo '<option value="'.$donne['club'].'">'.$donne['club'];
}
echo '</select>'; ?>

j'ai testé ça (voir dessous) mais dans cela ne marche pas :

$cl =$bdd->prepare('SELECT * FROM clubs') or die(print_r($bdd->errorInfo()));
$cl->execute(array());

<td>EQUIPE</td><td><?php echo '<select name="envoi_equipe1" size=1>';
while ($donne = $cl->fetch())
{
echo '<option value="'.$donne['logo']['club'].'">'.$donne['logo']['club'];
}
echo '</select>'; ?>

24 réponses

Résumé de la discussion

La discussion porte sur l'affichage simultané du champ logo et du champ club dans un élément select HTML, et sur la manière d'associer ces données à une valeur d'option. Plusieurs participants notent qu'afficher directement une image dans une balise option n'est pas fiable selon les navigateurs, et proposent d'utiliser des styles CSS pour afficher le logo en arrière-plan. D'autres évoquent l'idée d'injecter le chemin du logo dans la valeur et de le styliser via des classes CSS, ou de remplacer le contrôle par un widget personnalisé afin d'accueillir l'image et le texte. Pour autant, l'intégration d'un rendu graphique fiable peut nécessiter une approche hors du select, comme un widget personnalisé, afin d'allier image et texte sans compromis sur l'affichage.

Bobot (l’IA à votre service)
  1. bon apparemment ça s'affiche dans firefox 3.6.20 (mac) mais pas dans safari 5.1 (mac)
    c'est donc un problème d'interprétation des navigateurs j'ai l'impression
    1. J'allais en venir à ça...
      De coup, je ne pense pas que tu aies une solution pour Safari, à moins de recoder un <select> à base de div, css et javascript... mais ça fait du boulot !
  2. oui oui l'image est bien là, elle marche dans le background d'une div mais pas du bouton
    1. bon ba là je peux pas simplifier plus: j'ai mis l'image à la racine et ma page est vraiment basique !! si vous ouvrez mon code dans une page et que vous mettez une image du même nom à la racine ça marche chez vous ?? chez moi ne marche pas !!

      voici le code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Document sans nom</title>
      </head>

      <body>

      <select name="envoi_formeMatch" size=1>
      <option style="background:url(VIRY.png) no-repeat;" value="1">la france</option>
      </select>

      </body>
      </html>
      1. Tu es sûr que ton image est bien là ?
        Si tu rajoutes à ta page
        <im src="logo/France.png" />
        Ça s'affiche bien ?

        Xavier
        1. pour moi ça marche

          essayer de fermer la balise option peut être qu'elle de problème
          1. sur mon code de dessus n'apparait pas : <select width="100"> mais
            <select name="envoi_formeMatch" size=1>

            Mais j'ai également essayé avec votre suggestion <select width="100">
            1. ça ne marche pas non plus

              j'ai fais une page html classique:

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Document sans nom</title>
              </head>
              <style>

              .France{
              background-image: url(logo/France.png) no-repeat;
              }

              </style>

              <body>

              <select name="envoi_formeMatch" size=1>
              <option style="background:url(logo/France.png) no-repeat;" value="joue"> match joué (défaut)
              <option style="background:url(logo/France.png) no-repeat;" value="prolong"> après prolongations
              <option style="background:url(logo/France.png) no-repeat;" value="tirsbut"> tirs au but
              <option style="background:url(logo/France.png) no-repeat;" value="remis"> match remis
              <option style="background:url(logo/France.png) no-repeat;" value="forfait"> match forfait
              </select>

              </body>
              </html>
              1. voici ce code html

                <html>
                <head>
                <title>Test</title>

                </head>

                <body>
                <select width="100">
                <option style="background:url(logo/France.png) no-repeat;" value="1"> la france</option>
                </select>

                </body>
                </html>
                1. tient , essayer ceci

                  <select name="envoi_equipe2" size=1>
                  <option style="background:url(logo/France.png) no-repeat;" value="joue"> match joué (défaut)
                  1. reponse à la suggestion de Mahamid89: malheureusement ça ne fonctionne pas non plus pour:

                    essayer ceci dans votre css

                    .France{ background:url((logo/France.png) no-repeat; }
                    1. l'appel à mes css se fait j'ai créer css body au dessous de ma .France et mis un background color #000; et ça marche ...

                      donc je pense que c'est <option class="" qui bloque

                      qu'en pensez vous ?
                      1. essayer ceci dans votre css

                        .France{ background:url((logo/France.png) no-repeat; }
                        1. alors j'ai essayé comme ça en dehors du php et ne fonctionne pas non plus:

                          <select name="envoi_equipe2" size=1>
                          <option class="France" value="joue"> match joué (défaut)
                          <option class="France" value="prolong"> après prolongations
                          <option class="France" value="tirsbut"> tirs au but
                          <option class="France" value="remis"> match remis
                          <option class="France" value="forfait"> match forfait
                          </select>

                          Mes CSS sont interne à ma page.
                          1. Bonjour,

                            Et si tu essaies d'écrire juste le html / css (sans php) de ce que tu veux, est-ce que tu arrives à obtenir quelque chose de convaincant ?

                            Xavier
                            1. visiblement ça viendrait de echo '<option class="'.$donne['CSSLogo'].'" value="'.$donne['club'].'">'.$donne['club'];

                              car même en appelant la class en direct :

                              echo '<option class="France" value="'.$donne['club'].'">'.$donne['club'];

                              ça ne fonctionne pas ...
                              1. me revoilà après avoir suivis vos conseil, j'ai dû mal faire quelque chose car ça ne fonctionne pas.

                                Dans ma base de données j'ai changé le nom du champs en CSSLogo et chaque entrée s'appelle comme l'équipe.
                                ex club: France CSSLogo: France
                                si bien que option class="'.$donne['CSSLogo'].'" devrait bien être remplacer par ex"'.$donne['CSSLogo'].'" par France donc class="France" =.France

                                $cl =$bdd->prepare('SELECT * FROM clubs') or die(print_r($bdd->errorInfo()));
                                $cl->execute(array());

                                <?php echo '<select name="envoi_equipe1" size=1>';
                                while ($donne = $cl->fetch())
                                {
                                echo '<option class="'.$donne['CSSLogo'].'" value="'.$donne['club'].'">'.$donne['club'];
                                }
                                echo '</select>';

                                ma CSS ( je précise que les logo sont bien dans un dossier "logo"):

                                .France {
                                background-image: url(logo/France.png);
                                background-repeat: no-repeat;

                                }
                                1. Bonjour,

                                  Pour mettre des images dans un select, la seule façon de faire est celle donnée par mahamid89.

                                  Par contre, pour lier la classe CSS à ton champ en base de données, il faut simplement qu'ils soient identiques. Comme le point est interdit dans un nom de classe CSS (puisqu'il signifie, justement, « classe »), tu vas devoir modifier le contenu de ta table (ou rajouter une colonne), pour avoir la même chose des deux côtés.

                                  Xavier

                                  PS : ie, ici, signifie « c'est-à-dire », c'est une façon d'introduire l'explication qui suit, ce n'est pas du tout un terme informatique :p (En fait c'est une abréviation latine qui signifie, si je ne dis pas de bêtise, « in extenso » )
                                  1. re-bonjour,
                                    je comprend le principe néanmoins quelques éléments m'échappent:

                                    qu'est ce qui fait le lien par exemple entre la
                                    .fr { background:url(france.gif) no-repeat; }

                                    et la class de mon bouton -> class="'.$donne['logo'].

                                    car dans mon bouton j'appelle le contenu de mon champs (par ex: france.gif)
                                    mais rien ne raccorde ce champs à la class '.fr'

                                    mon incompréhension vient peut être du fait que je ne comprend pas ce qu'est "ie"
                                    dans votre première réponse.

                                    sous peine de passer pour un #%& je pose quand même la question:
                                    ie = internet explorer ??
                                    • 1
                                    • 2