Fichier index.html :

<html>

    <head>

        <!-- les 4 lignes suivantes sont nécessaires pour utiliser bootstrap !-->

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

 

        <script src='./messcripts.js'></script>

    </head>

    <body>

        <h1>Saisie des personnes</h1>

        <form id="f1" action="#">

            <div class="form-group">

                    Civilité :

                    <select id='civilite'>

                        <option>Madame</option>

                        <option>Monsieur</option>

                    </select>

            </div>

            <div class="form-group">

                    <label for="nom">Nom:</label>

                    <input type="text" class="form-control" placeholder="Saisir le nom" id="nom">

            </div>

            <div class="form-group">

                <label for="prenom">Prénom:</label>

                <input type="text" class="form-control" placeholder="Saisir le prénom" id="prenom">

            </div>

            <button type="button" class="btn btn-primary" onClick="ajouter()">Ajouter</button>

            <br/>

            Liste des ajouts :

            <select id="aff_pers" onClick="afficherDetails(this)">

            </select>

 

            <br/><br/>

            <span id="affichageRecap">

                <h2>Détails des ajouts</h2>

                <div class="card bg-success text-white">

                    <div class="card-body">

                        <span id = "details">

                        </span>

                    </div>

                </div>

            </span>

        </form>

    </body>

</html>


Fichier javascript messcripts.js :

var tabPersonne = [];

function ajouter()

{

    var aff_pers = document.getElementById("aff_pers");

    var civil = document.getElementById("civilite");

    var nom = document.getElementById("nom");

    aff_pers.innerHTML += "<option>" + nom.value + "</option>";

    var texte = civil.value  + " " + prenom.value + " " + nom.value + "<br/>"; // Pour pouvoir afficher le détail ensuite

    tabPersonne.push(texte);

    civil.selectedIndex = 0;

    nom.value="";

    prenom.value="";

}

function afficherDetails(sel)

{

    var details = document.getElementById("details");

    var index = sel.selectedIndex;

    details.innerHTML = tabPersonne[index];

}