JavaScript select Element | Mark's Trackside

összefoglaló: ebben a bemutatóban megtudhatja, hogyan kell kezelni a <select> elemet a JavaScriptben.

Bevezetés a HTML select elements

a <select> elem megadja a lehetőségek listáját. Ez lehetővé teszi egy vagy több lehetőség kiválasztását.

a <select> elem létrehozásához a <select> és <option> elemeket használja., Például:

a fenti <select> elem lehetővé teszi, hogy válasszon egy lehetőséget egy időben.

Ha több választást szeretne, hozzáadhatja a multiple attribútumot a <select> elemhez az alábbiak szerint:

<select> elem a JavaScriptben a HTMLSelectElement típust használja.,

aHTMLSelectElement típus a következő hasznos tulajdonságokkal rendelkezik:

selectedIndex – visszaadja a kiválasztott opció nulla alapú indexét. A selectedIndex -1 ha nincs kiválasztva opció. Ha a<select> elem több választást tesz lehetővé, akkor aselectedIndex visszaadja az első opcióvalue értékét.,
value – visszaadja az első kiválasztott opció elem value tulajdonságát, ha van ilyen, különben üres karakterláncot ad vissza.
multiple – returns true ha a <select> elem több választást tesz lehetővé. Ez egyenértékű a multiple attribútummal.

a <select> elem kiválasztásához használja a DOM API-t, mint például a getElementById()vagy querySelector().,

a következő példa szemlélteti, hogyan szerezhető be a kiválasztott opció indexe:

hogyan működik:

először válassza ki a<button>és<select>elemeket aquerySelector() módszer.
ezután csatoljon egy kattintásos eseményhallgatót a gombhoz, majd a kiválasztott indexet a alert() módszerrel jelenítse meg, amikor a gombra kattint.,

The value a <select> elem a <option> elemtől és annak HTML multiple attribútumától függ:

ha nincs kiválasztva opció, akkor a kiválasztó mező value tulajdonsága üres karakterlánc.
ha egy opció ki van választva, és value attribútummal rendelkezik, akkor a kiválasztott opció értéke a value tulajdonság.,
ha egy opció ki van választva, és nincs value attribútum, akkor a kiválasztott mező value tulajdonsága a kiválasztott opció szövege.
ha több opció van kiválasztva, akkor a kiválasztott mezővalue tulajdonsága az előző két szabály alapján az első kiválasztott opcióból származik.

lásd a következő példát:

ebben a példában:

ha az első opciót választja, a value a <select> tulajdonsága üres.,
ha az utolsó opciót választja ,a kiválasztó mezővalue tulajdonságaEmber.js mivel a kiválasztott opciónak nincsvalue attribútuma.
ha a második vagy harmadik opciót választja, az érték tulajdonság "1"vagy "2".

a JavaScriptben a HTMLOptionElementtípus a <option> elemet jelöli.,

a HTMLOptionElement típus a következő praktikus tulajdonságokkal rendelkezik:

index – az opció indexe az opciók gyűjteményében.
selected – true az opció kiválasztásakor. Ezt a tulajdonságot true értékre állítja be egy opció kiválasztásához.
text – visszaadja az opció szövegét.
value – visszaadja a HTML érték attribútumot.,08″>

Akkor érheti el, hogy a text vagy value a kiválasztott opció segítségével text vagy value tulajdonságok:


Code language: JavaScript (javascript)

Ha egy <select> elem lehetővé teszi a többszörös kijelölés, akkor használja a selected tulajdonság meghatározza, hogy mely opciók kiválasztása:

ebben A példában, a sb.options egy tömb-mint tárgy, annyira nem, hogy a filter() módszerek, mint egy Array objektum.,

a Array objektum kölcsönzéséhez a call() módszert használja. Például a következő függvény egy tömb a kiválasztott opciók:


Code language: PHP (php)

a text ingatlan a lehetőség, hogy a lánc az eredménye, hogy a filter() módszer a map() módszer, mint ez:


Code language: JavaScript (javascript)

A <select> elem lehetővé teszi, hogy válasszon ki egy vagy több lehetőség., Adja hozzá amultiple attribútumot a<select> elemhez a több választás engedélyezéséhez.
a HTMLSelectElementa <select> elemet jelöli. Használja aselectedIndex ésvalue értéket, hogy megkapja a kiválasztott opció indexét és értékét.
a HTMLOptionElementa <option> elemet jelöli. Ha az opció be van jelölve ,aselected tulajdonság igaz., AselectedText ésselectedValue tulajdonságok visszaadják a kiválasztott opciótext ésvalue értékét.