HTML - Поместите содержимое тега SELECT в INPUT type = "text" - PullRequest
Новая
       26

HTML - Поместите содержимое тега SELECT в INPUT type = "text"

6 голосов
/ 29 марта 2010

У меня есть форма на веб-странице, где я хочу поместить выбранный элемент из выпадающего списка в тестовую коробку. Код, который у меня есть до сих пор, следующий: 

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

Я думаю, что мне нужно использовать JavaScript .... но какая-нибудь помощь? : -)

спасибо

Ответы [ 3 ]

4 голосов
/ 29 марта 2010

Вы можете добавить JavaScript прямо в кнопку: 

<input type="button" onclick="
    var s = this.form.elements['Cities'];
    this.form.elements['SelectedCity'].value =
      s.options[s.selectedIndex].textContent">
2 голосов
/ 11 октября 2013

На самом деле вам не нужен JS для этого, просто HTML может сделать это для вас следующим образом: 

<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>
2 голосов
/ 29 марта 2010 
 <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>
...