html 中的动态下拉列表

Question

我必须制作一个 html 页面，其中应该有文本框和一个添加按钮，如果用户通过文本框添加内容，那么它应该在下拉列表中可见。

请帮忙编写代码。

提前致谢。

Answer 1

我不太确定你需要什么，但根据你的描述，我能够构建这个基本页面：

const list = document.getElementById("lists");
const text = document.getElementById("myText");
function addEntry(){
  var newOption = document.createElement("OPTION");
  newOption.value = text.value;
  newOption.innerHTML = text.value;
  list.appendChild(newOption);
  text.value = "";
  text.focus();
}

<select id="lists">
<option selected disabled>-- SELECT ONE --</option>
</select>
<br><br>
<input type="text" id="myText" placeholder="Type here...">
<input type="button" onclick="addEntry()" value="+ ADD">

基本上，这使用了一个获取值的函数，创建了一个 HTML <option> 元素，然后将其插入到下拉菜单中。

html 中的动态下拉列表

dynamic Drodown in html

javascript

forms

dropdown