Блог

Главная - Вопросы по программированию - Создание текстового поля из выпадающего списка в javascript

Создание текстового поля из выпадающего списка в javascript

#javascript #asp.net

#javascript #asp.net

Вопрос:

Я немного новичок в 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>

Как вы можете видеть, у меня есть функция с именем createTextForm() в отдельном файле javascript, который я пытаюсь выяснить.

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

Редактировать: я ценю помощь всех, но из-за моего плохого понимания и описания рассматриваемой проблемы я решил пойти с другим решением моей проблемы. Вместо этого я создал текстовые поля, скрытые с помощью CSS, а затем просто показывал их на основе выбора выпадающего списка.

Комментарии:

1. Итак … учитывая, возможно, отсутствие контекста, container не определено в вашей функции, т. Е. Нет var container = DOMObject ;

2. Извините, я не понимаю. Контейнер не определен? Имейте в виду, что это была моя попытка создать текстовое поле, я не уверен, правильно это или нет. Я работал над этим, и я думаю, что onchange() вместо onclick() — лучший вариант, но создание текстового поля все еще сбивает меня с толку.

3. Да, так … что это container ? container это может быть целое число, число с плавающей запятой, строка, какой-либо объект из созданного вами класса и т. Д. Или объект объектной модели документа (DOMObject). Что вам нужно сделать, это либо создать другой контейнер с идентификатором или классом, который вы можете использовать для его выбора. Например, в asp создайте элемент с id="container" помощью . В javascript вы можете выбрать этот элемент, сказав: var container = document.getElementById('container'); , который идет с другими объявлениями переменных… т.е. рядом с var input .

4. Ах, я думаю, теперь я понимаю, да, действие, которое создает ввод, должно было быть выбором выпадающего списка. Таким образом, односторонний способ, например, создаст текстовое поле для ввода из города, а другое — для ввода в город, а другое — для даты вылета.

5. Является ли мой контейнер не выпадающим списком @ShanerM13? Так что идея выбрать с помощью javascript var container = document.getElementById(‘Выпадающий список flightselection’);

Ответ №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);
}

Ответ №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>