JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<table>
    <tr>
        <td>Liste des fruits :
            <br />
            <select id="liste_fruits" size="8" style="width:90px;">
                <option value="ananas">Ananas</option>
                <option value="banane">Banane</option>
                <option value="citron">Citron</option>
                <option value="fraise">Fraise</option>
                <option value="orange">Orange</option>
                <option value="pomme">Pomme</option>
                <option value="raisin">Raisin</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>

JavaScript

$(document).ready(function () {
    // variables sélécteur
    var $liste_fruits = $('#liste_fruits');
    var $panier = $('#panier');
    var $ajouter = $('#ajouter');
    var $supprimer = $('#supprimer');

    // on sélectionne un fruit dans la liste
    $liste_fruits.change(function () {
        $ajouter.attr('disabled', false);
    });

    // on sélectionne un fruit dans le panier
    $panier.change(function () {
        $supprimer.attr('disabled', false);
    });

    $ajouter.click(function () {
        $ajouter.attr('disabled', true); // on désactive le bouton
        transfertFruit($($liste_fruits.selector + ' option:selected'), $panier);
    });

    $supprimer.click(function () {
        $supprimer.attr('disabled', true); // on désactive le bouton
        transfertFruit($($panier.selector + ' option:selected'), $liste_fruits);
    });
});

// fonction qui va s'occuper de basculer un fruit d'une liste à l'autre
function transfertFruit($fruit, $panierArrivee) {
    // on ajoute l'option au panier
    $('<option>', {
        value: $fruit.val(),
        text: $fruit.text()
    }).appendTo($panierArrivee);

    $fruit.remove(); // on supprime le fruit de la liste de départ
}