В этом руководстве будет определена процедура добавления параметра из входного текста в тег выбора с использованием JavaScript.
Как добавить возможность выбора тега из входного текста с помощью JavaScript?
Чтобы добавить параметр из входного текста в тег выбора с помощью JavaScript, вы можете использовать различные методы, например:
Давайте рассмотрим каждый метод один за другим!
Метод 1: добавить параметр для выбора тега из входного текста с использованием метода add() с конструктором параметров
Для добавления параметра из входного текста в теге выбора используйте « добавлять() ” метод с “ Вариант Конструктор. Метод add() используется для добавления элементов в опции « HTMLSelectElement », также известный как тег
Синтаксис
Следуйте предоставленному синтаксису, чтобы использовать метод add() для добавления опции в теге select:
добавлять ( вариант, существующий вариант ) ;Здесь « вариант ” представляет новую опцию, которая будет добавлена вместо “ существующий вариант ».
Пример
Мы создадим поле ввода, выпадающее меню, используя <выбрать> тег и кнопка, которая добавит новые параметры в элемент выбора, вызывая « вставить вариант () ” при нажатии:
< тип ввода знак равно 'текст' я бы знак равно 'текст' заполнитель знак равно 'Введите текст, чтобы добавить опцию' >< выберите идентификатор знак равно 'опции' >
< стоимость опции знак равно 'с' > С вариант >
Выбрать >
< бр >< бр >
< идентификатор кнопки знак равно 'добавить бтн' по щелчку знак равно 'вставить вариант()' > Добавить вариант кнопка >
В файле JS определите функцию с именем « вставить вариант () », а затем получить доступ к кнопке, текстовому полю и элементу выбора с назначенными им идентификаторами, используя « селектор запросов() метод. Затем создайте экземпляр параметра с помощью конструктора Option и вызовите метод add(), передав существующий параметр и новый параметр, который необходимо добавить в конец списка:
функцияinsertOption ( ){
константа addBtn знак равно документ. селектор запросов ( '#addbtn' ) ;
константа список знак равно документ. селектор запросов ( '#опции' ) ;
константа падать знак равно документ. селектор запросов ( '#текст' ) ;
константа вариант знак равно новый Вариант ( падать. ценность , падать. ценность ) ;
список. добавлять ( вариант, не определено ) ;
падать. ценность знак равно '' ;
падать. фокус ( ) ;
}
Вывод показывает, что новая опция из текстового поля добавлена в конец выпадающего меню:
Примечание: Вы можете использовать этот метод, чтобы добавить параметр в начало тега select, добавив значение существующего параметра в качестве второго параметра вместо неопределенного. Он добавит новую опцию перед существующей.
Давайте перейдем к другому методу!
Способ 2: добавить параметр для выбора тега из входного текста с помощью createElement() с методом appendChild()
Существует еще один подход, с помощью которого вы можете создать новый элемент с помощью « создатьЭлемент() ” метод с “ добавить дочерний элемент () метод. Используя эту методологию, мы добавим параметры в начало тега select.
Синтаксис
Используйте следующий синтаксис для добавления параметра в тег выбора из входного текста с помощью метода appendChild():
appendChild ( новыйOptionValue ) ;Пример
Здесь мы создадим раскрывающийся список, добавив два параметра: С ' а также ' С++ ', поле ввода и кнопка, которая вызовет определяемую пользователем функцию JavaScript с именем ' вставить вариант () », когда срабатывает его событие onclick:
< тип ввода знак равно 'текст' я бы знак равно 'текст' заполнитель знак равно 'Введите текст, чтобы добавить опцию' >< выберите идентификатор знак равно 'падать' >
< вариант > С вариант >
< вариант > С ++ вариант >
Выбрать >
< бр >< бр >
< кнопка при нажатии знак равно 'Вставить Опцию();' > Добавить вариант кнопка >
В функции с именем « вставить вариант () », сначала получите доступ к элементу выбора и текстовому полю, используя назначенные им идентификаторы, а затем вызовите методы createElement() и createTextNode() для создания экземпляра параметра и получения текстового значения в качестве параметра. После этого вызовите метод appendChild() и передайте текстовое значение в качестве параметра, затем добавьте этот параметр в начало списка выбора, используя « вставить перед () ” с выбранным элементом:
функцияinsertOption ( ){
переменная выбрать знак равно документ. получитьэлементбиид ( 'падать' ) ,
текстовое значение знак равно документ. получитьэлементбиид ( 'текст' ) . ценность ,
новая опция знак равно документ. создатьЭлемент ( 'Вариант' ) ,
новыйOptionValue знак равно документ. создатьтекстовыйузел ( текстовое значение ) ;
новыйОпция. appendChild ( новыйOptionValue ) ;
Выбрать. вставитьперед ( новый вариант, выберите. Первый ребенок ) ;
}
Как видите, вывод показывает, что новая опция из текстового поля добавляется в начало выпадающего меню:
Мы собрали все возможные решения для добавления опций из входного текста в тег select.
Вывод
Чтобы добавить параметр из входного текста в тег выбора с помощью JavaScript, вы можете использовать встроенные методы JavaScript, включая метод add() или метод appendChild(). Вы можете добавить параметры в теге выбора в начале списка, а также в конце списка. В этом руководстве мы определили процедуру добавления параметра из входного текста в тег выбора с использованием JavaScript с подробными примерами.