HTML select

Bonjour à tous
Je ne me souviens plus comment on peut faire la chose suivante.
Dans une <form> je cherche à définir un <select> avec les propriétés suivantes:
- pouvoir choisir plusieurs valeurs dans la liste
- pouvoir créer une nouvelle valeur dans la liste si ce qu'il y a dans la liste ne convient pas.
Je me souviens avoir fait ça il y a longtemps, je me souviens que c'était plutôt difficile, et je ne retrouve pas le code correspondant.

Auriez vous ça sous la main pour m'éviter à devoir réinventer l'eau chaude ?

Bonsoir,
je n'ai pas retrouvé ton sujet, mais ça me dit quelque chose et je pense que ce codepen t’était destiné pour tests : https://codepen.io/gc-nomade/pen/eYNjpvR

++

Merci de ta réponse
Ce n’est pas tout à fait ce que je cherche à faire. Je crois que je vais mettre ma flemme de côté et me mettre au travail
Modifié par PapyJP (06 Feb 2023 - 10:09)

PapyJP a écrit :
- pouvoir choisir plusieurs valeurs dans la liste

Bonjour,
l'attribut multiple devrait faire l'affaire.
Modifié par CrazyYann (07 Feb 2023 - 09:05)

Oui, j'ai utilisé l'attribut multiple, le problème est du côté de pouvoir ajouter dynamiquement une nouvelle option à la liste, sachant de plus que si des options sont déjà sélectionnées au moment de l'ajout de la nouvelle option elles doivent rester sélectionnées après l'ajout.
Je galère pas mal sur la façon d'ajouter une option en JavaScript. Pour une raison que j'ignore, si je j'exécute le code en pas à pas on voit bien l'option s'ajouter à la liste et se sélectionner, mais quand le code se termine la liste s'affiche sans cette option, et toutes les sélections sont supprimées. Je vais changer mon approche.

Salut,

J'ai fais un petit code (vaguement inspiré de 2 codes trouvés sur la doc) et je n'ai pas l'air d'avoir ton problème : https://jsfiddle.net/6ygu97q5/1/

<select multiple id="select">
<option> 1</option>
<option> 2</option>
<option> 3</option>
</select><br><br>

<input type="text" id="NewValue">
<button id="myBtn" onclick="addValue()">
Add Value
</button> <br><br>

function addValue(){

//code pour le opt ici  https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add
 

  if(document.getElementById("NewValue").value != ""){
    let opt = document.createElement("option");
    opt.value = opt.text = document.getElementById("NewValue").value;
    opt.selected = "selected";
    document.getElementById("NewValue").value = "";
    document.getElementById("select").add(opt);
  }
}

//Code pour le enter pris ici :  https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp
 

// Get the input field
var input = document.getElementById("NewValue");

// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});