HTML - Mettre le contenu du tag SELECT dans INPUT type = "text"

Question

J'ai un formulaire dans une page Web où je souhaite placer l'élément sélectionné dans une liste déroulante dans une boîte de test. Le code que j'ai jusqu'à présent est la suivante:

  <form action = ""> 
       <select name = "Cities"> 
        <option value="----">--Select--</option> 
        <option value="roma">Roma</option> 
        <option value="torino">Torino</option> 
        <option value="milan">Milan</option> 
       </select> 
       <br/> 
       <br/> 
       <input type="button" value="Test"> 
       <input type="text" name="SelectedCity" value="" /> 
      </form> 

Je pense que je dois utiliser javascript .... mais aucune aide? :-)

merci

Answer 1

Vous pouvez ajouter JavaScript directement dans le bouton:

<input type="button" onclick=" 
    var s = this.form.elements['Cities']; 
    this.form.elements['SelectedCity'].value = 
     s.options[s.selectedIndex].textContent"> 

Answer 2

<script type="text/javascript"> 
    function OnDropDownChange(dropDown) { 
     var selectedValue = dropDown.options[dropDown.selectedIndex].value; 
     document.getElementById("txtSelectedCity").value = selectedValue; 
    } 
</script> 

     <form action = ""> 
      <select name = "Cities" onChange="OnDropDownChange(this);"> 
       <option value="----">--Select--</option> 
       <option value="roma">Roma</option> 
       <option value="torino">Torino</option> 
       <option value="milan">Milan</option> 
      </select> 
      <br/> 
      <br/> 
      <input type="button" value="Test"> 
      <input type="text" id="txtSelectedCity" name="SelectedCity" value="" /> 
     </form> 

Answer 3

En fait, vous ne avez pas besoin de JS pour ce faire, tout simplement HTML peut le faire pour vous comme suit:

<form action="a.php" method="post"> 
    <select name = "Car"> 
    <option value="BMW">BMW</option> 
    <option value="AUDI">AUDI</option> 
    </select> 
    <input type="submit" value="Submit"> 
</form>