Comment remplir dynamiquement un menu déroulant à partir d'une zone de texte

Question

J'ai un formulaire où l'utilisateur doit entrer une liste de choix dans une série de zones de texte: par exemple:

Enter speaker name 1: [ ] [] remove speaker 
    Enter speaker name 2: [ ] [] remove speaker 
    Enter speaker name 3: [ ] [] remove speaker 

Sur la base de ce que l'utilisateur entre ici, une autre baisse a jusqu'à être peuplé sur la même page les données saisies ici ne sont pas stockées dans la base de données POURTANT.

L'autre déroulante est quelque chose comme:

Dialogue: [ text box] 
Select Speaker: [....target drop down where the above entered options have to show up....] 

Toute pensée? Je travaille avec Javascript et PHP.

Merci!

Answer 1

Cela devrait vous aider sur votre chemin

var myName = "foo", myValue = "bar" 

var select = document.getElementById("mySelect"); 
select.options[select.options.length] = new Option(myName, myValue); 

Answer 2

Voici une approche naïve avec jQuery. Compte tenu de ce HTML:

<div> 
    Speaker1: <input class="speaker" type="text" name="speaker1" /><br/> 
    Speaker2: <input class="speaker" type="text" name="speaker2" /><br/> 
    Speaker3: <input class="speaker" type="text" name="speaker3" /><br/> 

    <select class="speaker-list"></select> 
</div> 

et ce code jQuery:

$(function() { 
    $('input.speaker').blur(function() { 
     var values = $('input.speaker').filter(function(){ // discard fields with no value 
       return this.value != ''; 
     }).map(function() { 
       return $(this).val();  // return the value 
     }).get();       // get the values 

     var $list = $('.speaker-list').empty(); 
     for(var i in values) { 
      $('<option />').text(values[i]).appendTo($list); // build and add options 
     } 
    }); 
}); 

il met à jour la liste des orateurs disponibles à tout moment un champ de saisie de texte desserre mise au point.

Vous trouverez un exemple de travail ici: http://jsbin.com/ariti4/2

Cela devrait vous donner un bon départ.

Référence: .filter(), .map(),. get(), .html()