JavaScript-valitse Elementin | Mark's Trackside

Yhteenveto: tämä opetusohjelma, opit, miten käsitellä <select> elementti JavaScript.

Johdanto HTML-valitse elementtejä

<select> – elementti, joka tarjoaa sinulle luettelon valinnat. Sen avulla voit valita yhden tai useita vaihtoehtoja.

muodostaa <select> elementti, voit käyttää <select> ja <option> elementit., Esimerkiksi:

edellä <select> – elementin avulla voit valita yhden vaihtoehdon kerrallaan.

Jos haluat useita valintoja, voit lisätä multiple määrite <select> – elementtiin seuraavasti:

vuorovaikutuksessa <select> elementti JavaScript, voit käyttää HTMLSelectElement tyyppi.,

HTMLSelectElement tyyppi on seuraavat hyödyllisiä ominaisuuksia:

selectedIndex – funktio palauttaa nolla-pohjainen indeksi valitun vaihtoehdon. selectedIndex on -1 jos ei-vaihtoehto on valittuna. Jos <select> – elementin avulla useita valintoja, selectedIndex palaa value ensimmäinen vaihtoehto.,
value palaa value kiinteistövälitys ensimmäinen valittu vaihtoehto elementti, jos siellä on yksi, muutoin se palauttaa tyhjän merkkijonon.
multiple palaa true jos <select> – elementin avulla useita valintoja. Se vastaa multiple attribuutti.

valitse <select> elementti, voit käyttää DOM API, kuten getElementById() tai querySelector().,

seuraavassa esimerkissä kuvataan, miten saada indeksi valittu vaihtoehto:

Kuinka se toimii:

Ensimmäinen, valitse <button> ja <select> elementtiä käyttäen querySelector() menetelmä.
Sitten, kiinnitä klikkaa tapahtuman kuuntelija-painiketta ja näytä valitun indeksin avulla alert() menetelmä, kun painiketta napsautetaan.,

value omaisuutta <select> elementti riippuu <option> – elementti ja sen HTML: multiple ominaisuus:

Jos ei-vaihtoehto on valittuna, value kiinteistövälitys valitse laatikko on tyhjä merkkijono.
Jos vaihtoehto on valittu ja on – value ominaisuus, value kiinteistövälitys valitse laatikko on arvo valittu vaihtoehto.,
Jos vaihtoehto on valittu ja ei ole value ominaisuus, value kiinteistövälitys valitse laatikko on teksti valittu vaihtoehto.
Jos useita vaihtoehtoja on valittu, value kiinteistövälitys valitse laatikko on peräisin ensimmäinen valittu vaihtoehto perustuu kahden edellisen sääntöjä.

Katso seuraava esimerkki:

tässä esimerkki:

Jos valitset ensimmäisen vaihtoehdon, value omaisuutta <select> on tyhjä.,
Jos valitset viimeinen vaihtoehto, value kiinteistövälitys valitse laatikko on Ember.js koska valittu vaihtoehto ei ole value attribuutti.
Jos valitset toisen tai kolmannen vaihtoehdon, omaisuuden arvo on "1"tai "2".

JavaScript HTMLOptionElement tyyppi edustaa <option> elementti.,

HTMLOptionElement tyyppi on seuraavat käteviä ominaisuuksia:

index – indeksi vaihtoehto sisällä kokoelma vaihtoehtoja.
selected palaa true kun vaihtoehto on valittu. Voit valita vaihtoehdon asettamalla tämän ominaisuuden true.
text – palauttaa option tekstin.
value – palauttaa HTML-attribuutin arvo.,08″>

voit käyttää text ja value valitun vaihtoehdon kautta text ja value ominaisuudet:


Code language: JavaScript (javascript)

– Jos <select> – elementin avulla useita valintoja, voit käyttää selected omaisuutta määrittää, mitkä vaihtoehdot ovat valittuna:

tässä esimerkissä, sb.options array-kuin esine, joten se ei ole filter() menetelmiä, kuten Array objekti.,

Voit lainata näitä menetelmiä Array objekti, voit käyttää call() menetelmä. Esimerkiksi seuraavat palauttaa joukko valittu valinnat:


Code language: PHP (php)

Ja text kiinteistön vaihtoehtoja, ketjun tulos filter() menetelmä, jossa map() menetelmä, kuten tämä:


Code language: JavaScript (javascript)

<select> – elementin avulla voit valita yhden tai useita vaihtoehtoja., Lisää multiple määrite <select> elementti mahdollistaa useita valintoja.
HTMLSelectElement edustaa <select> elementti. Käyttää selectedIndex ja value saada indeksi ja arvo valittu vaihtoehto.
HTMLOptionElement edustaa <option> elementti. Jos vaihtoehto valitaan, selected ominaisuus pitää paikkansa., selectedText ja selectedValue ominaisuudet return text ja value valitun vaihtoehdon.