Ymmärrämme kuinka hallita < valitse > vaihtoehto sisään JavaScript tässä opetusohjelmassa.
HTML Valitse vaihtoehto
Vaihtoehto helpottaa vaihtoehtoluetteloa. Sen avulla voimme valita yhden tai useamman vaihtoehdon. Käytämme elementtejä ja vaihtoehdon muodostamiseen.
Esimerkiksi:
Red Yellow Green Blue
Vaihtoehto antaa meille mahdollisuuden valita yksi vaihtoehto kerrallaan, joka on mainittu edellä.
Jos haluamme useamman kuin yhden valinnan, voimme sisällyttää määritteen < useita > elementtejä alla:
java pitkä int
Red Yellow Green Blue
HTMLSelectElement-tyyppi
Käytämme HTMLSelectElement-tyyppiä vuorovaikutukseen JavaScript-vaihtoehdon kanssa.
HTMLSelectElement-tyyppi sisältää seuraavat hyödylliset attribuutit:
SelectIndex-ominaisuus
Käytämme DOM API:ta kuten querySelector() tai getElementById() .
Esimerkki osoittaa, kuinka hankitaan alla mainittu valittu optioindeksi:
JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.selectedIndex); }; Kuinka se toimii:
- Valitse aluksi ja komponentit querySelector()-metodin avulla.
- Tämän jälkeen linkitä klikkaustapahtuman kuuntelija tähän painikkeeseen ja näytä valittu hakemisto alert()-metodin avulla, jos painiketta painetaan.
arvo omaisuutta
Elementin arvo-ominaisuus perustuu sen HTML-koodin komponenttiin ja useaan määritteeseen:
- Valintaruudun arvo-ominaisuus on tyhjä merkkijono, kun mitään vaihtoehtoa ei ole valittu.
- Valintaruudun arvo-ominaisuus on valitun vaihtoehdon arvo, kun vaihtoehto on valittu ja sisältää arvo-attribuutin.
- Valintaruudun arvo-ominaisuus on valitun vaihtoehdon teksti, kun vaihtoehto on valittu eikä se sisällä arvoattribuuttia.
- Valintaruudun arvo-ominaisuus johdetaan alkuperäisestä valitusta vaihtoehdosta kahden edellisen säännön osalta, kun useampi kuin yksi vaihtoehto on valittuna.
Harkitse alla olevaa esimerkkiä:
JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.value); }; Tässä yllä olevassa esimerkissä:
- Elementin arvo-attribuutti on tyhjä, kun valitsemme alkuvaihtoehdon.
- Valintaruudun arvo-attribuutti on Ember.js, koska valittu vaihtoehto ei sisällä arvoattribuuttia, kun valitsemme viimeisen vaihtoehdon.
- Arvo-attribuutti on '1' tai '2', kun valitsemme kolmannen tai toisen vaihtoehdon.
HTMLOptionElement-tyyppi
HTMLOptionElement-tyyppi kuvaa elementtiä JavaScriptissä.
Tämä tyyppi sisältää seuraavat ominaisuudet:
Indeksi- Vaihtoehdon indeksi vaihtoehtojen ryhmässä.
Valittu- Se palauttaa todellisen arvon, jos vaihtoehto valitaan. Asetamme valitun ominaisuuden tosi vaihtoehdon valitsemista varten.
Teksti- Se palauttaa vaihtoehdon tekstin.
Arvo- Se palauttaa HTML:n value-attribuutin.
Komponentti sisältää option-attribuutin, jonka avulla voimme käyttää kokoelmavaihtoehtoja:
selectBox.options
Esimerkiksi toisen vaihtoehdon arvon ja tekstin saamiseksi käytämme alla:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Saadaksemme valitun komponentin vaihtoehdon yksittäisen valinnan lisäksi käytämme alla olevaa koodia:
let selectOption = selectBox.options [selectBox.selectedIndex];
Tämän jälkeen pääsemme käsiksi valitun vaihtoehdon arvoon ja tekstiin arvon ja tekstin ominaisuuksien perusteella:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Kun komponentti sallii useamman kuin yhden valinnan, voimme käyttää valittua attribuuttia määrittämään, mikä vaihtoehto on valittuna:
JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; Esimerkissä sb.optio on taulukon kaltainen objekti. Siksi se ei sisällä samaa filter()-metodia kuin Array-objekti.
Lainataksemme tämäntyyppisiä menetelmiä array-objektin kautta, käytämme call()-menetelmää, alla on joukko valittuja vaihtoehtoja:
[].filter.call(sb.options, option => option.selected)
Ja saadaksemme minkä tahansa vaihtoehdon tekstiattribuutin, voimme ketjuttaa filter()-menetelmän tuloksen map()-menetelmän kanssa, kuten alla:
.map(option => option.text);
Valitun vaihtoehdon saaminen käyttämällä silmukkaa
Voimme käyttää for-silmukkaa iteroitaessa valittujen listavaihtoehtojen mukaan, mikä on valittu. Voidaan kuvata funktio, jolla palautetaan viittaus valittuun vaihtoehtoon tai arvoon. Alla on viittaus valittuun vaihtoehtoon:
function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>