Този урок ще дефинира процедурата за добавяне на опция от въведен текст към избран таг с помощта на JavaScript.
Как да добавите опция за избор на етикет от въведен текст с помощта на JavaScript?
За да добавите опция от въведен текст към избран маркер с помощта на JavaScript, можете да използвате различни методи, като например:
Нека разгледаме всеки метод един по един!
Метод 1: Добавете опция за избор на етикет от въведен текст с помощта на метод add() с конструктор на опции
За да добавите опция от въведения текст в избран таг, използвайте „ добави () ' метод с ' опция ” Конструктор. Методът add() се използва за добавяне на елементи към опциите на „ HTMLSelectElement ” известен също като таг
Синтаксис
Следвайте предоставения синтаксис, за да използвате метода add() за добавяне на опция в избран таг:
добавете ( опция, съществуваща опция ) ;Тук „ опция “ представлява новата опция, която ще бъде добавена на мястото на „ съществуваща опция ”.
Пример
Ще създадем поле за въвеждане, падащо меню с помощта на <изберете> маркер и бутон, който ще добави нови опции в избран елемент, извиквайки „ вмъкванеОпция() ” функция, когато се щракне:
< тип вход = 'текст' документ за самоличност = 'текст' контейнер = „Въведете текст, за да добавите опция“ >< изберете id = 'настроики' >
< стойност на опцията = '° С' > ° С опция >
изберете >
< бр >< бр >
< идентификатор на бутона = 'добавете btn' onclick = 'insertOption()' > Добавяне на опция бутон >
В JS файла дефинирайте функция с име „ вмъкванеОпция() ” и след това отворете бутона, текстовото поле и елемента за избор с присвоения им идентификатор, като използвате „ querySelector() ” метод. След това създайте екземпляр на опцията с помощта на конструктора Option и извикайте метода add(), като подадете съществуващата опция и новата опция, която трябва да се добави в края на списъка:
functioninsertOption ( ){
конст addBtn = документ. querySelector ( '#addbtn' ) ;
конст списъчна кутия = документ. querySelector ( '#настроики' ) ;
конст падащо меню = документ. querySelector ( '#текст' ) ;
конст опция = нов опция ( падащо меню. стойност , падащо меню. стойност ) ;
списъчна кутия. добавете ( опция, неопределена ) ;
падащо меню. стойност = '' ;
падащо меню. фокус ( ) ;
}
Изходът показва, че новата опция от текстовото поле е добавена в края на падащото меню:
Забележка: Можете да използвате този метод, за да добавите опцията в началото на маркера за избор, като добавите стойността на съществуващата опция като втори параметър вместо undefined. Той ще добави новата опция преди съществуващата.
Да преминем към другия метод!
Метод 2: Добавете опция за избор на етикет от въведен текст с помощта на createElement() с метод appendChild()
Има друг подход, чрез който можете да създадете нов елемент с помощта на „ createElement() ' метод с ' appendChild() ” метод. Използвайки тази методология, ние ще добавим опциите в началото на маркера за избор.
Синтаксис
Използвайте следния синтаксис за добавяне на опция в таг за избор от въведения текст с помощта на метода appendChild():
appendChild ( newOptionValue ) ;Пример
Тук ще създадем падащ списък, като добавим две опции ' ° С ' и ' C++ “, поле за въвеждане и бутон, който ще извика дефинираната от потребителя JavaScript функция с име „ вмъкванеОпция() ”, когато се задейства неговото събитие onclick:
< тип вход = 'текст' документ за самоличност = 'текст' контейнер = „Въведете текст, за да добавите опция“ >< изберете id = 'падащо меню' >
< опция > ° С опция >
< опция > ° С ++ опция >
изберете >
< бр >< бр >
< бутон при щракване = 'insertOption();' > Добавяне на опция бутон >
Във функция с име „ вмъкванеОпция() ”, първо осъществете достъп до елемента за избор и текстовото поле, като използвате присвоените им идентификатори и след това извикайте методите createElement() и createTextNode() за създаване на екземпляр на опция и извлечете текстовата стойност като опция. След това извикайте метода appendChild() и предайте текстовата стойност като опция, след което добавете тази опция в началото на списъка за избор, като използвате „ вмъкванеПреди() ” с избран елемент:
functioninsertOption ( ){
var select = документ. getElementById ( 'падащо меню' ) ,
textValue = документ. getElementById ( 'текст' ) . стойност ,
newOption = документ. createElement ( 'Опция' ) ,
newOptionValue = документ. createTextNode ( textValue ) ;
newOption. appendChild ( newOptionValue ) ;
изберете. вмъкниПреди ( нова опция, изберете. първо дете ) ;
}
Както можете да видите, изходът показва, че новата опция от текстовото поле е добавена в началото на падащото меню:
Събрахме всички възможни решения за добавяне на опции от въведен текст към избрания таг.
Заключение
За да добавите опция от въведен текст към избран маркер с помощта на JavaScript, можете да използвате вградените методи на JavaScript, включително метод add() или метод appendChild(). Можете да добавите опции в таг за избор в началото на списъка, както и в края на списъка. В този урок сме дефинирали процедурата за добавяне на опция от въведен текст към избран таг с помощта на JavaScript с подробни примери.