Mes suprasime, kaip valdyti < pasirinkite > parinktis JavaScript šioje pamokoje.
HTML Pasirinkite Parinktis
Pasirinkimas palengvina mums parinkčių sąrašą. Tai leidžia mums pasirinkti vieną ar daugiau nei vieną variantą. Pasirinkimui sudaryti naudojame elementus ir.
Pavyzdžiui:
Red Yellow Green Blue
Ši parinktis leidžia mums pasirinkti vieną parinktį vienu metu, kaip minėta aukščiau.
Jei norime daugiau nei vieno pasirinkimo, galime įtraukti atributą į < daugkartinis > žemiau esantys elementai:
jei sakinys java
Red Yellow Green Blue
HTMLSelectElement tipas
Sąveikavimui su „JavaScript“ parinktimi naudojame HTMLSelectElement tipą.
HTMLSelectElement tipe yra šie naudingi atributai:
pasirinktaIndekso nuosavybė
Taikome DOM API kaip querySelector() arba getElementById() .
Pavyzdyje nurodoma, kaip gauti pasirinkto pasirinkimo indeksą, kuris paminėtas toliau:
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); }; Kaip tai veikia:
- Iš pradžių pasirinkite ir komponentus naudodami querySelector() metodą.
- Po to susiekite paspaudimo įvykių klausytoją su šiuo mygtuku ir, jei mygtukas bus paspaustas, parodykite pasirinktą rodyklę alert() metodo pagalba.
vertės turtas
Elemento vertės ypatybė priklauso nuo jo HTML komponento ir kelių atributų:
- Kai nepasirinkta jokia parinktis, pasirinkimo laukelio vertės ypatybė bus tuščia eilutė.
- Pasirinkimo laukelio vertės ypatybė bus pasirinktos parinkties vertė, kai parinktis bus pasirinkta ir joje bus reikšmės atributas.
- Pasirinkimo laukelio vertės ypatybė bus pasirinktos parinkties tekstas, kai parinktis bus pasirinkta ir joje nėra reikšmės atributo.
- Pasirinkimo laukelio vertės ypatybė bus išvesta iš pradinės pasirinktos parinkties pagal ankstesnes dvi taisykles, kai pasirenkama daugiau nei viena parinktis.
Apsvarstykite toliau pateiktą pavyzdį:
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); }; Šiame aukščiau pateiktame pavyzdyje:
- Kai pasirenkame pradinę parinktį, elemento vertės atributas yra tuščias.
- Pasirinkimo laukelio reikšmės atributas bus Ember.js, nes pasirinktoje parinktyje nėra reikšmės atributo, kai pasirenkame paskutinę parinktį.
- Vertės atributas bus „1“ arba „2“, kai pasirinksime trečią arba antrą parinktį.
HTMLOptionElement tipas
HTMLOptionElement tipas iliustruoja elementą JavaScript.
Šiam tipui būdingos šios savybės:
Indeksas- Parinkties indeksas parinkčių grupėje.
Pasirinkta- Jis grąžina tikrąją vertę, jei pasirenkama parinktis. Pasirinktą ypatybę nustatome teisinga, kad pasirinktume parinktį.
Tekstas- Jis grąžina parinkties tekstą.
Vertė- Jis grąžina HTML vertės atributą.
Komponente yra parinkties atributas, leidžiantis pasiekti rinkimo parinktis:
selectBox.options
Pavyzdžiui, norėdami pasiekti antrosios parinkties vertę ir tekstą, naudojame toliau pateiktą informaciją:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Norėdami gauti pasirinktą komponento parinktį kartu su individualiu pasirinkimu, naudojame toliau pateiktą kodą:
let selectOption = selectBox.options [selectBox.selectedIndex];
Po to galime pasiekti pasirinktos parinkties reikšmę ir tekstą pagal vertę ir teksto savybes:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Kai komponentas leidžia pasirinkti daugiau nei vieną pasirinkimą, galime naudoti pasirinktą atributą, kad nustatytų, kuri parinktis pasirinkta:
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); }; Pavyzdyje sb.parinktis yra į masyvą panašus objektas. Taigi jame nėra filtro () metodo, tokio pat kaip ir masyvo objekte.
Norėdami skolintis šių tipų metodus per masyvo objektą, naudojame call() metodą, toliau pateikiamas pasirinktų parinkčių masyvas:
[].filter.call(sb.options, option => option.selected)
Ir norėdami gauti bet kurios parinkties teksto atributą, galime sujungti filtro () metodo rezultatus kartu su žemėlapio () metodu, kaip nurodyta toliau:
.map(option => option.text);
Norėdami gauti pasirinktą parinktį naudodami for ciklus
Mes galime naudoti for kilpą, kad kartotume pagal pasirinktas sąrašo parinktis, kad nustatytų, kuri yra pasirinkta. Gali būti aprašyta funkcija, skirta grąžinti nuorodą į pasirinktą parinktį arba reikšmę. Toliau pateikiama nuoroda į pasirinktą parinktį:
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;>