Συλλογή επιλογών Select

HTML DOM Σύνολο Select

Ορισμός και χρήση

Collection Συλλογή που επιστρέφει όλες τις επιλογές της στήλης Εлементο επιλογής συλλογή.

Σημείωση:Τα στοιχεία της συλλογής είναι ταξινομημένα κατά τη σειρά που εμφανίζονται στο κώδικα πηγής.

Εγχειρίδιο

Παράδειγμα 1

Επισκεφθείτε πόσες επιλογές υπάρχουν στη συγκεκριμένη λίστα επιλογών:

var x = document.getElementById("mySelect").options.length;

}

Το αποτέλεσμα θα είναι:

4

Συμβουλή:Περισσότερες περιπτώσεις παρέχονται στο κάτω μέρος της σελίδας.

Γλώσσα:

selectObject.options

Ιδιότητα

Ιδιότητα Περιγραφή
length

Επιστρέφει τον αριθμό των στοιχείων <option> στη συλλογή.

Σημείωση:Αυτή η ιδιότητα είναι μόνο για ανάγνωση
selectedIndex Ορίζει ή επιστρέφει τον αριθμό ιδρυσης του επιλεγμένου στοιχείου <option> στη συλλογή (από 0).

Μέθοδος

Μέθοδος Περιγραφή
[ίδρυση]

Αποκτήστε το στοιχείο <option> με τον καθορισμένο αριθμό ιδρυσης (από 0) από τη συλλογή.

Σημείωση:Αν ο αριθμός ιδρυσης είναι εκτός φάσης, επιστρέφει null.
[add(option[,ίδρυση] Προσθέστε το στοιχείο <option> στη συλλογή στην καθορισμένη θέση του ιδρυσης. Αν δεν καθοριστεί ιδρυση, το στοιχείο θα εισαχθεί στο τέλος της συλλογής.
item(ίδρυση)

Αποκτήστε το στοιχείο <option> με τον καθορισμένο αριθμό ιδρυσης (από 0) από τη συλλογή.

Σημείωση:Αν ο αριθμός ιδρυσης είναι εκτός φάσης, επιστρέφει null.
namedItem(id)

Αποκτήστε το στοιχείο <option> με τον καθορισμένο ID από τη συλλογή.

Σημείωση:Αν id Αν δεν υπάρχει, επιστρέφει null.
remove(ίδρυση) Αφαιρέστε το στοιχείο <option> με τον καθορισμένο αριθμό ιδρυσης από τη συλλογή.

Τεχνικά λεπτομέρειες

Έκδοση DOM: Core Level 2 Document Object
Αποτελεσματικότητα:

Το αντικείμενο HTMLOptionsCollection, που εκπροσωπεί όλα τα στοιχεία <option> στο στοιχείο <select>.

Τα στοιχεία της συλλογής είναι ταξινομημένα κατά τη σειρά που εμφανίζονται στο κώδικα πηγής.

Περισσότερες περιπτώσεις

Παράδειγμα 2: [ίδρυση]

Αποκτήστε τον κείμενο της πρώτης επιλογής στη λίστα επιλογών (ίδρυση 0):

var x = document.getElementById("mySelect").options[0].text;

}

Το αποτέλεσμα θα είναι:

Μήλο

Παράδειγμα 3: item(ίδρυση)

Αποκτήστε τον κείμενο της πρώτης επιλογής στη λίστα επιλογών (ίδρυση 0):

var x = document.getElementById("mySelect").options.item(0).text;

}

Το αποτέλεσμα θα είναι:

Μήλο

Παράδειγμα 4: namedItem(id)

Αποκτήστε τον κείμενο της επιλογής με id="orange" στη λίστα επιλογών:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

}

Το αποτέλεσμα θα είναι:

Απόληξη

Στο σημείο του εικονιδίου της λίστας επιλογών

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Κι위";
x.options.add(c, 1);

}

Παράδειγμα 6

Διαγραφή της επιλογής με index "1" από το μενού διαλέξης:

var x = document.getElementById("mySelect"); x.options.remove(1);

}

Παράδειγμα 7

Κύκλος πλοήγησης σε όλες τις επιλογές του μενού διαλέξης και εμφάνιση του κειμένου κάθε επιλογής:

var x = document.getElementById("mySelect");
var txt = "";
if (cars) {
for (i = 0; i < x.length; i++) {
  txt = txt + x.options[i].text + "<br>";
modelList.options.add(car);

}

Το αποτέλεσμα θα είναι:

Μήλο
Απόληξη
Αποκάλυψη
Μπανάνα

Παράδειγμα 8

Επιλέξτε μια επιλογή από το μενού διαλέξης και εμφανίστε το κείμενο της επιλεγμένης επιλογής στο στοιχείο με id="demo":

var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;

}

Το αποτέλεσμα θα είναι:

Μπανάνα

Παράδειγμα 9

Αλλαγή των επιλογών της μενού διαλέξης με βάση την επιλογή από το άλλο μενού διαλέξης:

var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
  var carList = document.getElementById("car");
  var modelList = document.getElementById("carmodel");
  var selCar = carList.options[carList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  modelList.options.add(car);
  var cars = carsAndModels[selCar];
  if (cars) {
    if (cars) {
    var i;
      for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
    modelList.options.add(car);
  modelList.options.add(car);
modelList.options.add(car);

}

Δοκιμάστε το προσωπικά Browser Support Collection Options

HTML DOM Σύνολο Select