Meg fogjuk érteni, hogyan kell kezelni < válassza ki > opció be JavaScript ebben az oktatóanyagban.
HTML Válassza az Opciót
Egy opció megkönnyíti számunkra az opciók listáját. Lehetővé teszi egy vagy több lehetőség kiválasztását. Opció kialakításához a és elemeket használjuk.
Például:
Red Yellow Green Blue
Az opció lehetővé teszi, hogy egyszerre csak egy opciót válasszunk, amit fent említettünk.
Ha egynél több kijelölést szeretnénk, akkor a < attribútumot is megadhatjuk többszörös > alábbi elemek:
húr hosszúra
Red Yellow Green Blue
HTMLSelectElement típus
A HTMLSelectElement típust használjuk a JavaScript opcióval való interakcióhoz.
A HTMLSelectElement típus a következő hasznos attribútumokat tartalmazza:
SelectIndex tulajdonság
Alkalmazzuk a DOM API-t, mint például querySelector() vagy getElementById() .
A példa bemutatja, hogyan szerezhető be az alábbiakban említett kiválasztott opcióindex:
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); }; Hogyan működik:
- Kezdetben válassza ki a és a komponenseket a querySelector() metódus segítségével.
- Ezt követően kapcsolja össze a kattintási eseményfigyelőt ehhez a gombhoz, és a gomb megnyomásakor az alert() metódus segítségével jelenítse meg a kiválasztott indexet.
értékű ingatlan
Az elem érték tulajdonsága a HTML-jének összetevőjére és többszörös attribútumaira támaszkodik:
- A kijelölőmező érték tulajdonsága egy üres karakterlánc lesz, ha nincs kiválasztva opció.
- A kijelölődoboz érték tulajdonsága a kiválasztott beállítás értéke lesz, ha egy opciót kiválasztottak, és tartalmazza az érték attribútumot.
- A kijelölőmező érték tulajdonsága a kiválasztott opció szövege lesz, ha egy opciót kiválasztottak, és nem tartalmaz értékattribútumot.
- Ha egynél több opció van kiválasztva, a kijelölőmező értéktulajdonsága az előző két szabályhoz tartozó kezdeti kiválasztott beállításból származik.
Tekintsük az alábbi példát:
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); }; Ebben a fenti példában:
- Az elem érték attribútuma üres, amikor kiválasztjuk a kezdeti opciót.
- A kijelölődoboz érték attribútuma az Ember.js lesz, mivel a kiválasztott opció nem tartalmaz value attribútumot, amikor az utolsó opciót választjuk.
- Az value attribútum '1' vagy '2' lesz, ha a harmadik vagy második lehetőséget választjuk.
HTMLOptionElement típus
A HTMLOptionElement típus illusztrálja az elemet a JavaScriptben.
Ez a típus a következő tulajdonságokat tartalmazza:
Index- Az opció indexe az opciók csoportjában.
Kiválasztott- Valódi értéket ad vissza, ha az opciót választja. A kiválasztott tulajdonságot igaznak állítjuk be egy opció kiválasztásához.
Szöveg- Visszaadja az opció szövegét.
Érték- A HTML érték attribútumát adja vissza.
Az összetevő tartalmaz egy opció attribútumot, amely lehetővé teszi számunkra a gyűjtési beállítások elérését:
selectBox.options
Például a második opció értékének és szövegének eléréséhez az alábbiakat használjuk:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
A komponens kiválasztott opciójának megszerzéséhez egyéni kiválasztás mellett az alábbi kódot használjuk:
let selectOption = selectBox.options [selectBox.selectedIndex];
Ezt követően érték és szövegtulajdonságok alapján érhetjük el a kiválasztott opció értékét és szövegét:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Ha a komponens egynél több kijelölést tesz lehetővé, akkor egy kiválasztott attribútum segítségével határozhatjuk meg, hogy melyik opció van kiválasztva:
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); }; A példában a sb.opció a tömbszerű objektum. Ezért nem tartalmazza a filter() metódus ugyanazt, mint az Array objektum.
Az ilyen típusú metódusok tömbobjektumokon keresztüli kölcsönzéséhez call() metódust használunk, az alábbiakban a választott opciók tömbjét adjuk meg:
[].filter.call(sb.options, option => option.selected)
És bármely opció szöveg attribútumának megszerzéséhez láncolhatjuk a filter() metódus eredményét egy map() metódussal, az alábbiak szerint:
.map(option => option.text);
A kiválasztott opció eléréséhez a for ciklus használatával
A for ciklust használhatjuk a kiválasztott listaopciók szerinti iterációhoz, hogy meghatározzuk, melyiket választottuk. Leírható egy függvény, amely visszaadja a hivatkozást egy kiválasztott opcióra vagy értékre. Az alábbiakban hivatkozás található egy kiválasztott opcióra:
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;>