Jak dodać opcje do wyboru za pomocą JavaScript

W JavaScript zwykle spotykamy wyzwanie, w którym musimy dołączyć złożoną listę, w której chcemy dodać lub edytować opcję w przypadku aktualizacji lub zmian w kryteriach. Ponadto posiadanie wielu opcji i brak obsługi kategorii może powodować problemy w scenariuszach ręcznych. W tych scenariuszach dostarczone metody dodawania nowych opcji mogą cię uratować.

Ten zapis będzie prowadzony na temat dodawania opcji do wyboru za pomocą JavaScript.

Jak dodać/wstawić opcje wyboru za pomocą JavaScript?

Możemy dodać opcje do wyboru za pomocą JavaScript przy użyciu trzech prostych metod:

• "dokument.createElement ()" metoda
• "JQuery" Biblioteka
• "Opcja()”Konstruktor

Teraz przejdziemy przez każde z wymienionych podejść jeden po drugim!

Metoda 1: Dodaj opcje, aby wybrać z JavaScript za pomocą dokumentu.Metoda CreateElement ()

„„dokument.createElement ()„Metoda tworzy węzeł elementu. Możesz także skorzystać z tej metody, aby utworzyć dodatkową opcję na istniejącej liście opcji. Ta funkcjonalność zostanie osiągnięta poprzez włączenie przycisku, który doda określoną opcję do listy po kliknięciu.

Do dodania opcji do wyboru za pomocą JavaScript za pomocą dokumentu.Metoda createElement (), musisz postępować zgodnie z podaną składnią.

Składnia

dokument.UtwórzElement (typ)

Tutaj, "typ”Odnosi się do rodzaju elementu, który należy utworzyć.

Spójrz na poniższy przykład zrozumienia określonej koncepcji.

Przykład
W poniższym przykładzie przypisamy konkretny identyfikator „Addoptions”I rozmiar„3”, Który odnosi się do rozmiaru pojemnika, w którym umieszczane są trzy opcje. Teraz przypiszmy wartości opcji o nazwie „Pyton" I "Jawa". Następnie dodaj przycisk z „na kliknięcie" wydarzenie. Będzie działać w taki sposób, że po naciśnięciu przycisku funkcja „addoptions ()„Zostanie uruchomiony:

Pyton
Jawa

Dodaj nową opcję

W następnym kroku zdefiniujemy funkcję „addoptions ()”I uzyskaj dostęp do określonego identyfikatora Wybierz za pomocą„dokument.getElementById ()" metoda. Następnie stworzymy „opcja„Element do dodania nowej wartości na liście opcji.

Na koniec przypisamy wartość „JavaScript”Do konkretnej opcji i dodaj ją do listy opcji za pomocą„dodać()" metoda:

Wyjście powyższej implementacji spowoduje następujący sposób:

Metoda 2: Dodaj opcje, aby wybrać z JavaScript za pomocą JQuery

"JQuery”Jest niezbędną biblioteką JavaScript, która ułatwia programowanie JavaScript. Możesz użyć jego „dodać()”Metoda dodania opcji i przypisania określonej wartości do tej konkretnej opcji.

Przejrzyjmy następujący przykład demonstracji.

Przykład
W tym samym pliku HTML dołączymy teraz bibliotekę jQuery w HTML ””Tag:

Następnie zastosujemy funkcje do dodania opcji na liście opcji w funkcji o nazwie „addoptions ()". Tutaj uzyskamy dostęp do identyfikatora wyboru za pomocą „#addoptions”, Dodaj nową opcję, używając„dodać()„Metoda z pomocą„val ()" I "tekst()”Metody:

Wynikowy wynik będzie:

Metoda 3: Dodaj opcje, aby wybrać z JavaScript za pomocą konstruktora opcji ()

„„Opcja()”Konstruktor tworzy nowy„Htmloptionelement". Można go wykorzystać do dodawania nowego gniazda dla dodatkowej opcji o nazwie „JavaScript".

Aby dodać opcje do wyboru za pomocą metody konstruktora opcji ().

Składnia

Nowa opcja (tekst, wartość)

Tutaj, "tekst”Reprezentuje treść elementu i„wartość”Odnosi się do wartości htmloptionelement

Przykład
Teraz będziemy korzystać z „addoptions ()”Funkcja uzyskania identyfikatora Select za pomocą„dokument.getElementById ()" metoda. Następnie zadzwoń do „Opcja()”Konstruktor i umieść wartość opcji„JavaScript" w tym. Potem „„appendChild ()„Metoda doda określoną wartość opcji na końcu listy:

Wyjście

Podaliśmy najprostsze metody dodawania opcji do wyboru za pomocą JavaScript.

Wniosek

Aby dodać opcje do wyboru za pomocą JavaScript, możesz użyć „dokument.createElement ()„Metoda tworzenia elementu opcji i w tym określonej wartości opcji w nim lub„JQuery„Biblioteka lub„Opcja()”Metoda konstruktora do dodania nowego gniazda dla dodatkowej opcji i dołączania jej wartości na liście opcji. W tym artykule poprowadzono Cię o dodanie opcji do wyboru za pomocą JavaScript.