从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

这是您目前拥有的，它没有任何意义，因为选择上的每个更改都会添加一个输入...

 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>