html中的动态Drodown

Question

我必须制作一个html页面，其中应该有TextBox和一个添加按钮，如果用户通过TextBox添加了一些内容，那么它应该在Dropdown中可见。

请帮忙处理代码。

提前谢谢。

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>元素，然后将其插入下拉菜单中。