用javascript从下拉列表创建文本框

Question

我对javascript有点陌生，很难弄清楚如何使用javascript从下拉列表中动态创建文本框。这是我的详细问题。这是我的下载列表：

<asp:DropDownList ID="ddlFlightSelection" runat="server" CssClass="dropbtn"  onclick="createTextForm()">
<asp:ListItem>PLEASE CHOOSE A FLIGHT</asp:ListItem>
<asp:ListItem>ONE-WAY</asp:ListItem>
<asp:ListItem>ROUND-TRIP</asp:ListItem>
<asp:ListItem>MULTI-CITY</asp:ListItem>
</asp:DropDownList>

正如您所看到的，我在一个单独的javascript文件中有一个名为createTextForm((的函数，我正在试图弄清楚它。

function createTextForm(){
var input = document.createElement('input');
input.type = "text";
container.appendChild(input);
}

编辑：我感谢大家的帮助，但由于我对手头问题的理解和描述不好，我决定用不同的解决方案来解决我的问题。相反，我所做的是创建通过CSS隐藏的文本框，然后根据下拉列表的选择来显示它们。

Answer 1

所以我理解目的。。。但我不熟悉asp以及如何在主体中创建另一个元素。。。我可以在谷歌上搜索。。。但无论如何。。。你想做的基本上是。。。

function createTextForm(){
var input = document.createElement('input');
var container = document.getElementsByTagName('body')[0];
//container could also be obtained with an element with id=my_container like so...
container = document.getElementById('my_container');
//or with a class... which returns an array of elements, so you have to select one
container = document.getElementByClassName('my_containers')[some number to select which element];
//if you have an element with id='dropDownListFlightSelection', you can use:
container = document.getElementById('dropDownListFlightSelection');
input.type = "text";
container.appendChild(input);
}

Answer 2

这是您当前拥有的内容，但实际上没有意义，因为对select的每一次更改都会添加一个输入。。。

const container = document.getElementById('input_container')
,   selector  = document.getElementById('ddlFlightSelection')
;
let count = 0
;
selector.onchange = evt =>
{
let input = document.createElement('input');
input.type = "text";
input.placeholder = `${selector.value} - ${++count}`
container.appendChild(input);
}

<select ID="ddlFlightSelection" class="dropbtn">
<option>PLEASE CHOOSE A FLIGHT</option>
<option>ONE-WAY</option>
<option>ROUND-TRIP</option>
<option>MULTI-CITY</option>
</select>
<div id="input_container"></div>