Bu öğretici, JavaScript kullanarak bir giriş metninden bir seçme etiketine bir seçenek ekleme prosedürünü tanımlayacaktır.
JavaScript Kullanarak Giriş Metninden Etiket Seçme Seçeneği Nasıl Eklenir?
JavaScript kullanarak bir giriş metninden bir seçme etiketine seçenek eklemek için aşağıdakiler gibi farklı yöntemler kullanabilirsiniz:
Her yöntemi tek tek inceleyelim!
Yöntem 1: Option Constructor ile add() Yöntemini Kullanarak Girdi Metninden Etiket Seçme Seçeneği Ekle
Bir seçme etiketindeki giriş metninden bir seçenek eklemek için “ Ekle() ” yöntemi ile Seçenek ” Yapıcı. Add() yöntemi, öğeleri “ seçeneklerine eklemek için kullanılır. HTMLSelectElement ” ayrıca
Sözdizimi
Bir seçme etiketine seçenek eklemek için add() yöntemini kullanmak için sağlanan sözdizimini izleyin:
Ekle ( seçenek, mevcutSeçenek ) ;Burada, “ seçenek ” yerine eklenecek yeni seçeneği temsil eder. mevcutSeçenek ”.
Örnek
Bir giriş alanı, kullanarak bir açılır menü oluşturacağız.
< kimliği seç = 'seçenekler' >
< Opsiyon değeri = 'c' > C seçenek >
seçme >
< br >< br >
< düğme kimliği = 'btn ekle' tıklamada = 'insertOption()' > Seçenek Ekle buton >
JS dosyasında “ adlı bir işlev tanımlayın. insertOption() ” ve ardından “ sorguSeçici() ' yöntem. Ardından, Option yapıcısını kullanarak seçeneğin bir örneğini oluşturun ve mevcut seçeneği ve listenin sonuna eklenmesi gereken yeni seçeneği ileterek add() yöntemini çağırın:
functioninsertOption ( ){
const addBtn = belge. sorgu seçici ( '#addbtn' ) ;
const liste kutusu = belge. sorgu seçici ( '#seçenekler' ) ;
const yıkılmak = belge. sorgu seçici ( '#Txt' ) ;
const seçenek = yeni Seçenek ( yıkılmak. değer , yıkılmak. değer ) ;
liste kutusu. Ekle ( seçenek, tanımsız ) ;
yıkılmak. değer = '' ;
yıkılmak. odak ( ) ;
}
Çıktı, açılır menünün sonuna metin alanındaki yeni seçeneğin eklendiğini gösterir:
Not: Bu yöntemi, var olan seçeneğin değerini tanımsız yerine ikinci bir parametre olarak ekleyerek, seçim etiketinin başına seçeneği eklemek için kullanabilirsiniz. Yeni seçeneği mevcut olandan önce ekleyecektir.
Diğer yönteme geçelim!
Yöntem 2: createElement() öğesini appendChild() Yöntemiyle Kullanarak Girdi Metninden Etiket Seçme Seçeneği Ekleme
“ Kullanarak yeni bir öğe oluşturabileceğiniz başka bir yaklaşım daha var. createElement() ” yöntemi ile “ ek Çocuk() ' yöntem. Bu metodolojiyi kullanarak, seçim etiketinin başına seçenekleri ekleyeceğiz.
Sözdizimi
AppendChild() yöntemini kullanarak giriş metninden seçme etiketine seçenek eklemek için aşağıdaki sözdizimini kullanın:
ekleÇocuk ( yeniOptionValue ) ;Örnek
Burada iki seçenek ekleyerek bir açılır liste oluşturacağız” C ' ve ' C++ ”, bir giriş alanı ve “ adlı kullanıcı tanımlı JavaScript işlevini çağıracak bir düğme insertOption() ” onclick olayı tetiklendiğinde:
< giriş tipi = 'Metin' İD = 'Txt' Yer tutucu = 'Seçenek eklemek için metni girin' >< kimliği seç = 'yıkılmak' >
< seçenek > C seçenek >
< seçenek > C ++ seçenek >
seçme >
< br >< br >
< tıklandığında düğme = 'insertOption();' > Seçenek Ekle buton >
“ adlı bir işlevde insertOption() ”, önce atanmış kimliklerini kullanarak select öğesine ve metin alanına erişin ve ardından bir seçenek örneği oluşturmak için createElement() ve createTextNode() yöntemlerini çağırın ve metin değerini bir seçenek olarak getirin. Bundan sonra, appendChild() yöntemini çağırın ve metin değerini bir seçenek olarak iletin, ardından bu seçeneği seçim listesinin başına “ kullanarak ekleyin. eklemeÖnce() ” seçili elemanlı yöntem:
functioninsertOption ( ){
var select = belge. getElementById ( 'yıkılmak' ) ,
metinDeğeri = belge. getElementById ( 'Txt' ) . değer ,
yeniSeçenek = belge. createElement ( 'Seçenek' ) ,
yeniOptionValue = belge. createTextNode ( metinDeğeri ) ;
yeniSeçenek. ekleÇocuk ( yeniOptionValue ) ;
seçme. EkleÖnce ( yeniSeçenek, seçin. ilk çocuk ) ;
}
Gördüğünüz gibi çıktı, açılır menünün başına metin alanındaki yeni seçeneğin eklendiğini gösteriyor:
Bir giriş metninden seçim etiketine seçenekler eklemek için olası tüm çözümleri derledik.
Çözüm
JavaScript kullanarak bir giriş metninden bir seçme etiketine seçenek eklemek için, add() yöntemi veya appendChild() yöntemi dahil olmak üzere JavaScript yerleşik yöntemlerini kullanabilirsiniz. Listenin başındaki ve sonundaki bir seçim etiketine seçenekler ekleyebilirsiniz. Bu öğreticide, ayrıntılı örneklerle JavaScript kullanarak bir giriş metninden bir seçme etiketine bir seçenek ekleme prosedürünü tanımladık.