Mēs sapratīsim, kā pārvaldīt < atlasiet > opcija iekšā JavaScript šajā apmācībā.
HTML Izvēlieties Opcija
Opcija atvieglo mums iespēju sarakstu. Tas ļauj mums izvēlēties vienu vai vairākas iespējas. Opcijas veidošanai izmantojam un elementus.
Piemēram:
Red Yellow Green Blue
Šī opcija ļauj mums vienlaikus izvēlēties vienu iepriekš minēto opciju.
Ja mēs vēlamies vairāk nekā vienu atlasi, mēs varam iekļaut atribūtu < vairākas > zemāk esošie elementi:
sveiki pasaule java
Red Yellow Green Blue
HTMLSelectElement veids
Mēs izmantojam HTMLSelectElement veidu, lai mijiedarbotos ar JavaScript opciju.
HTMLSelectElement tips satur šādus noderīgus atribūti:
atlasītsIndeksa rekvizīts
Mēs izmantojam DOM API, piemēram querySelector() vai getElementById() .
Piemērā ir norādīts, kā iegūt atlasīto opciju indeksu, kas minēts tālāk:
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); }; Kā tas strādā:
- Sākotnēji atlasiet un komponentus, izmantojot querySelector() metodi.
- Pēc tam saistiet klikšķu notikumu uztvērēju ar šo pogu un, ja poga tiek nospiesta, ar alert() metodes palīdzību parāda atlasīto indeksu.
vērtību īpašums
Elementa vērtības rekvizīts ir atkarīgs no tā HTML komponenta un vairāku atribūtu:
- Ja nav atlasīta neviena opcija, atlases lodziņa vērtības rekvizīts būs tukša virkne.
- Atlasīšanas lodziņa vērtības rekvizīts būs izvēlētās opcijas vērtība, ja opcija ir izvēlēta un satur vērtības atribūtu.
- Izvēles lodziņa vērtības rekvizīts būs izvēlētās opcijas teksts, ja opcija ir izvēlēta un nesatur vērtības atribūtu.
- Izvēles lodziņa vērtības rekvizīts tiks atvasināts no sākotnēji atlasītās opcijas attiecībā uz iepriekšējām divām kārtulām, ja ir izvēlēta vairāk nekā viena opcija.
Apsveriet tālāk sniegto piemēru:
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); }; Šajā iepriekš minētajā piemērā:
- Elementa vērtības atribūts ir tukšs, kad atlasām sākotnējo opciju.
- Atlases lodziņa vērtības atribūts būs Ember.js, jo izvēlētajā opcijā nav vērtības atribūta, kad mēs izvēlamies pēdējo opciju.
- Izvēloties trešo vai otro opciju, vērtības atribūts būs “1” vai “2”.
HTMLOptionElement veids
HTMLOptionElement tips ilustrē elementu JavaScript.
Šim tipam ir šādas īpašības:
Indekss- Opcijas indekss opciju grupā.
Atlasīts- Ja opcija ir izvēlēta, tā atgriež patieso vērtību. Mēs iestatījām atlasīto rekvizītu “true”, lai atlasītu opciju.
Teksts- Tas atgriež opcijas tekstu.
Vērtība- Tas atgriež HTML vērtības atribūtu.
Komponents satur opcijas atribūtu, kas ļauj mums piekļūt kolekcijas opcijām:
selectBox.options
Piemēram, lai piekļūtu otrās opcijas vērtībai un tekstam, mēs izmantojam tālāk norādīto.
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Lai iegūtu izvēlēto komponenta opciju kopā ar individuālu atlasi, mēs izmantojam tālāk norādīto kodu:
let selectOption = selectBox.options [selectBox.selectedIndex];
Pēc tam mēs varam piekļūt atlasītās opcijas vērtībai un tekstam pēc vērtības un teksta īpašībām:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Ja komponents pieļauj vairāk nekā vienu atlasi, mēs varam izmantot atlasīto atribūtu, lai noteiktu, kura opcija ir atlasīta:
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); }; Piemērā sb.opcija ir masīvam līdzīgs objekts. Tādējādi tajā nav ietverta metode filter () tāda pati kā masīva objekts.
Lai aizņemtos šāda veida metodes, izmantojot masīva objektu, mēs izmantojam call() metodi, tālāk sniegts izvēlēto opciju masīvs:
[].filter.call(sb.options, option => option.selected)
Un, lai iegūtu jebkuras opcijas teksta atribūtu, mēs varam ķēdīt filtra () metodes rezultātus kopā ar map () metodi, kā norādīts tālāk:
.map(option => option.text);
Lai iegūtu atlasīto opciju, izmantojot cilpu
MĒS varam izmantot for cilpu, lai iterētu pēc atlasītajām saraksta opcijām, lai noteiktu, kura ir izvēlēta. Var aprakstīt funkciju, lai atgrieztu atsauci uz atlasīto opciju vai vērtību. Tālāk sniegta atsauce uz izvēlēto opciju:
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;>