Αυτό το σεμινάριο θα καθορίσει τη διαδικασία για την προσθήκη μιας επιλογής από ένα κείμενο εισαγωγής σε μια επιλεγμένη ετικέτα χρησιμοποιώντας JavaScript.
Πώς να προσθέσετε επιλογή για επιλογή ετικέτας από κείμενο εισαγωγής χρησιμοποιώντας JavaScript;
Για να προσθέσετε μια επιλογή από ένα κείμενο εισαγωγής σε μια επιλεγμένη ετικέτα χρησιμοποιώντας JavaScript, μπορείτε να χρησιμοποιήσετε διαφορετικές μεθόδους, όπως:
Ας εξερευνήσουμε κάθε μέθοδο μία προς μία!
Μέθοδος 1: Προσθήκη επιλογής για επιλογή ετικέτας από κείμενο εισαγωγής χρησιμοποιώντας τη μέθοδο add() με τον κατασκευαστή επιλογών
Για να προσθέσετε μια επιλογή από το κείμενο εισαγωγής σε μια επιλεγμένη ετικέτα, χρησιμοποιήστε το ' Προσθήκη() 'μέθοδος με ' Επιλογή ” Κατασκευαστής. Η μέθοδος add() χρησιμοποιείται για την προσθήκη των στοιχείων στις επιλογές του ' HTMLSelectElement ” επίσης γνωστή ως ετικέτα <επιλογή>. Παίρνει δύο παραμέτρους ως ορίσματα.
Σύνταξη
Ακολουθήστε την παρεχόμενη σύνταξη για να χρησιμοποιήσετε τη μέθοδο add() για την προσθήκη μιας επιλογής σε μια ετικέτα επιλογής:
Προσθήκη ( επιλογή, υπάρχουσαΕπιλογή ) ;Εδώ, το « επιλογή ' αντιπροσωπεύει τη νέα επιλογή που πρόκειται να προστεθεί στη θέση του ' υπάρχουσα επιλογή '.
Παράδειγμα
Θα δημιουργήσουμε ένα πεδίο εισαγωγής, ένα αναπτυσσόμενο μενού χρησιμοποιώντας <επιλογή> ετικέτα και ένα κουμπί που θα προσθέσει νέες επιλογές σε ένα επιλεγμένο στοιχείο, καλώντας το ' insertOption() Λειτουργεί όταν κάνετε κλικ σε αυτό:
< τύπος εισόδου = 'κείμενο' ταυτότητα = 'κείμενο' κράτησης θέσης = 'Εισαγωγή κειμένου για προσθήκη επιλογής' >< επιλέξτε αναγνωριστικό = 'επιλογές' >
< τιμή επιλογής = 'ντο' > ντο επιλογή >
επιλέγω >
< br >< br >
< αναγνωριστικό κουμπιού = 'προσθήκη btn' στο κλικ = 'insertOption()' > Προσθήκη Επιλογής κουμπί >
Στο αρχείο JS, ορίστε μια συνάρτηση με το όνομα ' insertOption() ' και, στη συνέχεια, αποκτήστε πρόσβαση στο κουμπί, το πλαίσιο κειμένου και το στοιχείο επιλογής με το αναγνωριστικό που τους έχει εκχωρηθεί χρησιμοποιώντας το ' querySelector() 'μέθοδος. Στη συνέχεια, δημιουργήστε μια παρουσία της επιλογής χρησιμοποιώντας τον κατασκευαστή Option και καλέστε τη μέθοδο add() περνώντας την υπάρχουσα επιλογή και τη νέα επιλογή που πρέπει να προστεθεί στο τέλος της λίστας:
functioninsertOption ( ){
συνθ addBtn = έγγραφο. querySelector ( '#addbtn' ) ;
συνθ πλαίσιο λίστας = έγγραφο. querySelector ( '#options' ) ;
συνθ αναπτυσσόμενη λίστα = έγγραφο. querySelector ( '#κείμενο' ) ;
συνθ επιλογή = νέος Επιλογή ( αναπτυσσόμενη λίστα. αξία , αναπτυσσόμενο μενού. αξία ) ;
πλαίσιο λίστας. Προσθήκη ( επιλογή, απροσδιόριστη ) ;
αναπτυσσόμενη λίστα. αξία = '' ;
αναπτυσσόμενη λίστα. Συγκεντρώνω ( ) ;
}
Η έξοδος δείχνει ότι η νέα επιλογή από το πεδίο κειμένου προστίθεται στο τέλος του αναπτυσσόμενου μενού:
Σημείωση: Μπορείτε να χρησιμοποιήσετε αυτήν τη μέθοδο για να προσθέσετε την επιλογή στην αρχή της ετικέτας επιλογής προσθέτοντας την τιμή της υπάρχουσας επιλογής ως δεύτερη παράμετρο αντί για απροσδιόριστη. Θα προσθέσει τη νέα επιλογή πριν από την υπάρχουσα.
Πάμε στην άλλη μέθοδο!
Μέθοδος 2: Προσθήκη επιλογής για επιλογή ετικέτας από κείμενο εισαγωγής χρησιμοποιώντας τη μέθοδο createElement() με τη μέθοδο appendChild()
Υπάρχει μια άλλη προσέγγιση με την οποία μπορείτε να δημιουργήσετε ένα νέο στοιχείο χρησιμοποιώντας το ' createElement() μέθοδος με το « appendChild() 'μέθοδος. Χρησιμοποιώντας αυτήν τη μεθοδολογία, θα προσθέσουμε τις επιλογές στην αρχή της ετικέτας επιλογής.
Σύνταξη
Χρησιμοποιήστε την ακόλουθη σύνταξη για την προσθήκη επιλογής σε ετικέτα επιλογής από το κείμενο εισαγωγής χρησιμοποιώντας τη μέθοδο appendChild():
appendChild ( newOptionValue ) ;Παράδειγμα
Εδώ, θα δημιουργήσουμε μια αναπτυσσόμενη λίστα προσθέτοντας δύο επιλογές ' ντο ' και ' C++ ', ένα πεδίο εισαγωγής και ένα κουμπί που θα καλέσει τη συνάρτηση JavaScript που ορίζεται από το χρήστη με το όνομα ' insertOption() ' όταν ενεργοποιείται το συμβάν onclick του:
< τύπος εισόδου = 'κείμενο' ταυτότητα = 'κείμενο' κράτησης θέσης = 'Εισαγωγή κειμένου για προσθήκη επιλογής' >< επιλέξτε αναγνωριστικό = 'αναπτυσσόμενο' >
< επιλογή > ντο επιλογή >
< επιλογή > ντο ++ επιλογή >
επιλέγω >
< br >< br >
< κουμπί κάνοντας κλικ = 'insertOption();' > Προσθήκη Επιλογής κουμπί >
Σε μια συνάρτηση με το όνομα ' insertOption() ”, πρώτα αποκτήστε πρόσβαση στο στοιχείο επιλογής και στο πεδίο κειμένου χρησιμοποιώντας τα αναγνωριστικά που τους έχουν εκχωρηθεί και, στη συνέχεια, καλέστε τις μεθόδους createElement() και createTextNode() για τη δημιουργία μιας παρουσίας επιλογής και ανακτήστε την τιμή κειμένου ως επιλογή. Μετά από αυτό, καλέστε τη μέθοδο appendChild() και περάστε την τιμή κειμένου ως επιλογή και, στη συνέχεια, προσθέστε αυτήν την επιλογή στην αρχή της λίστας επιλογής χρησιμοποιώντας το ' insertBefore() μέθοδος με επιλογή στοιχείου:
functioninsertOption ( ){
var επιλέξτε = έγγραφο. getElementById ( 'αναπτυσσόμενο' ) ,
textValue = έγγραφο. getElementById ( 'κείμενο' ) . αξία ,
νέαΕπιλογή = έγγραφο. ΔημιουργίαΣτοιχείου ( 'Επιλογή' ) ,
newOptionValue = έγγραφο. createTextNode ( textValue ) ;
νέαΕπιλογή. appendChild ( newOptionValue ) ;
επιλέγω. εισάγετε Πριν ( νέαΕπιλογή, επιλέξτε. πρώτο παιδί ) ;
}
Όπως μπορείτε να δείτε ότι η έξοδος δείχνει ότι η νέα επιλογή από το πεδίο κειμένου προστίθεται στην αρχή του αναπτυσσόμενου μενού:
Έχουμε συγκεντρώσει όλες τις πιθανές λύσεις για την προσθήκη επιλογών από ένα κείμενο εισαγωγής στην ετικέτα επιλογής.
συμπέρασμα
Για να προσθέσετε μια επιλογή από ένα κείμενο εισαγωγής σε μια επιλεγμένη ετικέτα χρησιμοποιώντας JavaScript, μπορείτε να χρησιμοποιήσετε τις ενσωματωμένες μεθόδους JavaScript, συμπεριλαμβανομένης της μεθόδου add() ή της μεθόδου appendChild(). Μπορείτε να προσθέσετε επιλογές σε μια επιλεγμένη ετικέτα στην αρχή της λίστας καθώς και στο τέλος της λίστας. Σε αυτό το σεμινάριο, έχουμε ορίσει τη διαδικασία προσθήκης μιας επιλογής από ένα κείμενο εισαγωγής σε μια επιλεγμένη ετικέτα χρησιμοποιώντας JavaScript με λεπτομερή παραδείγματα.