getElementById et onChange

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 26 Mai 2015.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    732
    J'aime reçus:
    8
    Salut à tous,

    J'essaie de faire apparaitre une image sur le onChange d'un select mais j'ai un souci, voici mon code :

    Code:
    <script type="text/javascript">
    function update_pet_caption() {
    pet_caption = document.getElementById('caption').value;
    document.getElementById('pet_image').src = "images/" + pet_caption + ".jpg";
    }
    window.onload = update_pet_caption;
    </script>
    
    <img id="pet_image" src="">
    <select name='caption' id="caption" onChange='update_pet_caption()'>
    <option value="B-R" id="blanc-rose">Blanc Rose</option>
    <option value="R-S" id="rouge-sang">Rouge Sang</option>
    <option value="V-P" id="vert-pale">Vert Pale</option>
    </select>
    
    
    Je voudrais que mes "value" soient différentes de mes "id" dans mon select et que ce soit l'id qui soit récupéré dans la fonction javascript afin d'afficher le bon fichier image, exemple :

    L'url de mon image pour la « value="B-R" » est « images/blanc-rose.jpg » et non pas « images/B-R.jpg », comment faire cela dans ma fonction javascript ?

    Merci pour votre aide.
     
  2. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    renommer l'image ou changer la value du select.
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    732
    J'aime reçus:
    8
    Merci Zeb mais n'y a-t-il pas une possibilité d'avoir une value et un id différents et que ça marche ?

    Mes images sont déjà utilisées ailleurs avec ce nom et même chose pour les value du select !
     
  4. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    fait un tableau ou tu met les noms de fichier et transforme ta value du select en un indice du tableau. Tu aura ainsi une correspondance entre le select et le nom de fichier.
     
  5. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    792
    J'aime reçus:
    0
    peut-être :
    var e = document.getElementById("caption");
    var id = e.options[e.selectedIndex].id;
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    732
    J'aime reçus:
    8
    Bravo et merci, ta méthode fonctionne parfaitement bien :wink: :D
     
Chargement...
Similar Threads - getElementById onChange Forum Date
Création d'un flux RSS avec PHP, problème récurrent avec getElementById Développement d'un site Web ou d'une appli mobile 13 Juin 2010
Alert onchange checkbox (checked et unchecked) Développement d'un site Web ou d'une appli mobile 17 Mars 2018
[résolu] Action onchange sur FORM/SELECT qui ne fonctionne qu'à la première action ?!? Développement d'un site Web ou d'une appli mobile 31 Mai 2016
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice