Partage
  • Partager sur Facebook
  • Partager sur Twitter

Boutons et option:selected

S.prs
    15 mars 2018 à 14:14:01

    Bonjour, 

    Le but de ce travail en javascript est le suivant ; faire basculer des options entre deux listes <select>. Selon l'option sélectionnée, le bouton "ajouter" et "supprimer" changent de nature, soient enabled & disabled. Si je choisi une option se trouvant dans la première liste, le bouton "supprimer" doit être disabled, et le bouton "ajouter" enabled, et inversement pour l'autre liste.

    Seulement, mon code ne fonctionne pas totalement; les boutons s'activent et se désactivent "aléatoirement".

    (Le brief m'interdit de modifier le html)

    Voici mon code HTML & JS

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table>
        <tr>
            <td>Liste des légumes :<br />
                <select id="liste_fruits" size="8" style="width:90px;">
                    <option value="ananas">Courgette</option>
                    <option value="banane">Asperge</option>
                    <option value="citron">Tomate</option>
                    <option value="fraise">Aubergine</option>
                    <option value="orange">Lentille</option>
                    <option value="pomme">Piment</option>
                    <option value="raisin">Artichaut</option>
                </select>
            </td>
            <td>
                <button id="ajouter" disabled="disabled">Ajouter</button><br />
                <button id="supprimer" disabled="disabled">Supprimer</button>
            </td>
            <td>Mon panier :<br />
                <select id="panier" size="8" style="width:90px;">
                </select>
            </td>
        </tr>
    </table>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="script2.js"></script>
</body>
</html>
    $(document).ready(function () {


    $("option").click(function () {


        $('#liste_fruits option').each(function () {
            if ($(this).prop("selected") == true) {
                $("#supprimer").prop("disabled", true);
                $("#ajouter").prop("disabled", false);


                $('#ajouter').click(function () {

                    var selectedOpts = $('#liste_fruits option:selected');
                    $('#panier').append($(selectedOpts).clone());
                    $(selectedOpts).remove();
        
                });

            } 

        })


      


        $('#panier option').each(function () {
            if ($(this).prop("selected") == true) {
                $("#supprimer").prop("disabled", false);
                $("#ajouter").prop("disabled", true);


                $('#supprimer').click(function () {

                    var selectedOpts = $('#panier option:selected');
                    $('#liste_fruits').append($(selectedOpts).clone());
                    $(selectedOpts).remove();
        
                });


            }

        })


    });


});

    Merci pour votre aide!

    -
    Edité par S.prs 15 mars 2018 à 14:16:26

    • Partager sur Facebook
    • Partager sur Twitter
    GannoN
    • Javascript
      15 mars 2018 à 16:09:32

      C'est importe quoi ton code. Recommence !

      N'attache pas d'events dans un callback d'un aute events, sauf cas spécial.

      Voici a quoi sa devrais ressemble :

      // DOMContentLoader 
{

   // Recuperation des elements
   // elemFruits 
   const elemFruits = document.querySelector('#liste_fruits')
   // elemtPanier
   // btnAdd
   // btnRemove

   // Attach des events
   // elemFruits 'change'
      // => switch des button

   // elemtPanier 'change'
      // => switch des button

   //btnAdd Click
       // ajouter l'element selectioner dans elemPanier
       // retirer l'element selectioner dans elemFruits

   //btnRemove Click
       // retirer l'element selectioner dans elemPanier
       // ajouter l'element selectioner dans elemFruits
}



      • Partager sur Facebook
      • Partager sur Twitter

      Boutons et option:selected

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown