HTML - Put the contents of a SELECT tag in type INPUT = "text"

Question

I have a form on a web page where I would like to put the selected item in the drop-down list in the test panel. The code I have so far is as follows:

<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> 

I think I need to use javascript .... but any help ?:-)

thanks

Answer 1

You can add JavaScript directly to the button:

 <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

You really don't need JS for this, just HTML can do it for you as follows:

 <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>