從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>