Как выбрать из выпадающего списка И ввести текст - PullRequest
Новая
       11

Как выбрать из выпадающего списка И ввести текст

0 голосов
/ 24 сентября 2018

Я делаю форму с выпадающим списком выбора, в котором перечислены имена людей.

Мне также хотелось бы, чтобы форма давала вам возможность выбрать «Другое», а затем фактически ввести чье-то имя (как обычнополе ввода текста), если этот человек недоступен из списка.

Я не хочу, чтобы часть ввода текста отображалась в отдельном поле под раскрывающимся списком, я бы хотел, чтобы все было в одном поле.

Возможно ли это сделать в ванильном javascript и без плагина jquery? 

<form action="" method="post">
    <br>
    List of people: 
    <select>
      <option>John Doe</option>
      <option>Jane Doe</option>
      <option>Richard Doe</option>
      <option>Other (type name here)</option>
    </select>
    <br><br>
    <input type="submit" value="Submit">
    <br><br>
</form>

1 Ответ

0 голосов
/ 24 сентября 2018

Вы можете сделать что-то вроде кода ниже.Он полностью настраивается по вашему вкусу. 

let list = document.getElementById("list");
let other = document.getElementById("other");

function checkValue() {
    if (list.value === "Other (type name here)") {
        other.style.visibility = "visible";
        list.style.display = "none"
    } else {
        other.style.visibility = "hidden";
    }
}
<form action="" method="post">
  <br />
  List of people:
  <select id="list" onchange="checkValue()">
    <option>John Doe</option>
    <option>Jane Doe</option>
    <option>Richard Doe</option>
    <option>Other (type name here)</option>
  </select>
  <input type="text" style="visibility: hidden" id="other" />
  <br /><br />
  <input type="submit" value="Submit">
  <br /><br />
</form>
...