Jak dodać opcję, aby wybrać znacznik z tekstu wejściowego za pomocą JavaScript

Podczas opracowywania strony internetowej można dynamicznie dodać nowe opcje do wybranego elementu, co staje się trudne dla początkujących. W takiej sytuacji możesz użyć różnych metod JavaScript w celu dodania opcji do znacznika Wybierz z dodanego tekstu wejściowego. Nie wiem jak?

Ten samouczek zdefiniuje procedurę, aby dodać opcję z tekstu wejściowego do znacznika Wybierz za pomocą JavaScript.

Jak dodać opcję, aby wybrać znacznik z tekstu wejściowego za pomocą JavaScript?

Aby dodać opcję z tekstu wejściowego do znacznika Wybierz za pomocą JavaScript, możesz użyć różnych metod, takich jak:

• Metoda Dodaj () z konstruktorem opcji
• Metoda createElement () z metodą appendChild ()

Zbadajmy każdą metodę jeden po drugim!

Metoda 1: Dodaj opcję, aby wybrać znacznik z tekstu wejściowego za pomocą metody add () z konstruktorem opcji

Aby dodać opcję z tekstu wejściowego do znacznika Wybierz, użyj „dodać()„Metoda z„Opcja”Konstruktor. Metoda add () służy do dodania elementów do opcji „HTMLSELECTELETELENT”Znany również jako tag. Występuje dwa parametry jako argumenty.

Składnia

Postępuj zgodnie z podaną składnią, aby użyć metody dodawania () do dodania opcji w metodzie Wybierz:

add (opcja, istniejąca);

Tutaj "opcja”Reprezentuje nową opcję, która zostanie dodana zamiast„istniejąca".

Przykład

Utworzymy pole wejściowe, rozwijane menu za pomocą Tag i przycisk, który doda nowe opcje w elemencie wybranym, wywołując „insertoption ()„Funkcja po kliknięciu:

C




Dodaj opcję

W pliku JS zdefiniuj funkcję o nazwie „insertoption ()”, A następnie uzyskaj dostęp do przycisku, pola tekstowego i elementu Wybierz z przypisanym identyfikatorem za pomocą„QuerySelelect ()" metoda. Następnie utwórz instancję opcji za pomocą konstruktora opcji i wywołaj metodę add (), przekazując istniejącą opcję i nową opcję, którą należy dodać na końcu listy:

funkcjonalsertoption ()

const addbtn = dokument.querySelelect ('#addbtn');
const ListBox = Dokument.querySelelect („#opcje”);
const rzut = dokument.querySelelect („#txt”);
opcja const = nowa opcja (rozwijana.wartość, rozwijanie.wartość);
skrzynka na listy.Dodaj (opcja, niezdefiniowana);
upuścić.wartość = ";
upuścić.centrum();

Wyjście pokazuje, że nowa opcja z pola tekstowego jest dodawana na końcu menu rozwijanego:

Notatka: Możesz użyć tej metody, aby dodać opcję na początku znacznika Wybierz, dodając wartość istniejącej opcji jako drugiego parametru zamiast niezdefiniowanego. Doda nową opcję przed istniejącą.

Przejdźmy do drugiej metody!

Metoda 2: Dodaj opcję, aby wybrać znacznik z tekstu wejściowego za pomocą CreateElement () z metodą appendChild ()

Istnieje inne podejście, które możesz utworzyć nowy element za pomocą „createElement ()„Metoda z„appendChild ()" metoda. Korzystając z tej metodologii, dodamy opcje na początku znacznika Select.

Składnia

Użyj następującej składni, aby dodać opcję WYBIERZ WYBIERZ Z TEGUJ WEJŚCIA KORZYSTAĆ METODA APPENDCHILD ():

appendChild (newOptionValue);

Przykład

Tutaj utworzymy listę rozwijaną, dodając dwie opcje „C" I "C++”, Pole wejściowe i przycisk, który wywoła funkcję JavaScript zdefiniowaną przez użytkownika o nazwie„insertoption ()„Kiedy uruchamia się jego zdarzenie Onclick:

C
C++




Dodaj opcję

W funkcji o nazwie „insertoption ()”, Najpierw uzyskaj dostęp do elementu Wybierz i pola tekstowego za pomocą przypisanych identyfikator. Następnie zadzwoń do metody appendChild () i przejdź wartość tekstu jako opcję, dodaj tę opcję na początku listy wybranych za pomocą „insertBefore ()„Metoda z wybranym elementem:

funkcjonalsertoption ()

var select = dokument.getElementById („rozwijanie”),
TextValue = dokument.getElementById („txt”).wartość,
newOption = dokument.createElement („Opcja”),
newOptionValue = dokument.CreateTextNode (TextValue);
Newoption.appendChild (newOptionValue);
wybierać.insertBefore (newOption, wybierz.pierworodny);

Jak widać, wyjście pokazuje, że nowa opcja z pola tekstowego jest dodawana na początku menu rozwijanego:

Skompilowaliśmy wszystkie możliwe rozwiązania do dodawania opcji z tekstu wejściowego do znacznika Wybierz.

Wniosek

Aby dodać opcję z tekstu wejściowego do tagu wybierz za pomocą JavaScript, możesz użyć metody wbudowanej JavaScript, w tym metody dodawania () lub metody dodatkowej lub appendChild (). Możesz dodać opcje w etykiecie wyboru na początku listy, a także na końcu listy. W tym samouczku zdefiniowaliśmy procedurę, aby dodać opcję z tekstu wejściowego do etyk.