Handler pentru evenimentul onChange al obiectului Select

proprietățile selectate și selectate Index

Proprietățile text și ale valorii obiectului Opțiune

Proprietatea text reprezintă textul afișat în meniu care corespunde alternativei. În codul HTML este situat între etichetele și. Proprietatea value conține valoarea atributului VALUE al etichetei. De exemplu, să presupunem că una dintre opțiunile din listă a fost descrisă astfel:

Opțiunea unu

Apoi valoarea proprietățile textului obiectul corespunzător va fi egal cu „Opțiunea unu”, iar valoarea proprietății va fi egală cu „n1”.

Apare întrebarea, de ce sunt necesare două proprietăți? Faptul este că valoarea opțiunii selectate este transferată pe server. Dacă containerul nu are atributul VALUE, valoarea textului este trimisă la server.

Proprietatea selectedIndex a obiectului Select returnează numărul opțiunii selectate (numerotarea începe de la zero).

Opțiune: OneTwoChoose index:

Observați că în handlerul de evenimente onChange facem referire la al doilea element de formular. Pe în acest moment nu este definit, dar evenimentul va avea loc doar atunci când selectăm o opțiune - până în acest moment câmpul va fi deja definit.

Dacă lista de opțiuni este dată ca , i.e. cu posibilitatea de a selecta mai multe opțiuni simultan, proprietatea selectedIndex va returna indexul primei opțiuni selectate. În acest caz, există o alternativă: proprietatea selectată a fiecărui obiect Option. Este adevărat dacă această opțiune este selectat, iar fals în caz contrar. Un exemplu va fi dat mai jos.

Evenimentul Schimbare are loc atunci când utilizatorul își schimbă opțiunile. Dacă câmpul este un câmp de selecție cu o singură opțiune, atunci totul este simplu - vezi exemplul anterior. Să vedem ce se întâmplă când avem de-a face cu un câmp cu alegere multiplă:

Fructe: conserve de mere, vipeach
Articole selectate:

Exemplul 5.5. onChange handler atunci când selectați mai multe opțiuni (html, txt)

Rețineți că evenimentul Modificare are loc atunci când utilizatorul selectează sau deselectează o opțiune. Excepția este atunci când opțiunile sunt marcate secvențial în timpul selecției (apăsarea butonului mouse-ului pe un element, mutarea mouse-ului la elementul final, eliberarea butonului mouse-ului). În acest caz, evenimentul are loc atunci când utilizatorul eliberează butonul mouse-ului și toate alternativele marcate devin selectate.

lista poate fi fie cu posibilitatea de a selecta o singură opțiune, fie mai multe opțiuni.

Fiecare container este asociat cu un obiect din clasa Select, iar fiecare container copil este asociat cu un obiect din clasa Option, care este o proprietate a acestui obiect clasa Select. În plus, o proprietate a unui obiect de clasă Select este, de asemenea, o colecție de opțiuni care grupează toate obiectele sale secundare Option. Să enumerăm principalele proprietăți, metode și evenimente care caracterizează aceste obiecte.

Selectați obiectul Proprietăți Metode Manipulatori de evenimente

opțiuni dimensiune lungime multiplu selectatIndex

focus() blur() add() remove()

onBlur onChange onFocus

Obiect opțiune Proprietăți Metode Evenimente

Valoarea textului index selectată implicită

Nu vom descrie toate proprietățile, metodele și evenimentele acestor două obiecte. Să ne oprim doar asupra modalităților tipice de utilizare a combinațiilor lor.

Crearea obiectelor opțiuni

Obiectul clasei Option este interesant deoarece, spre deosebire de multe alte obiecte JavaScript încorporate în DOM, are un constructor. Aceasta înseamnă că programatorul poate crea el însuși un obiect de clasă Opțiune:

opt = opțiune nouă ([ text, [ valoare, [ implicitSelectat, [ selectat ]]]]);

unde argumentele corespund proprietăților obiectelor obișnuite ale clasei Option:

text - o linie de text care este plasată în container (de exemplu: text);
valoare - valoarea care este transmisă serverului la selectarea unei alternative asociate unui obiect Opțiune;
defaultSelected - dacă această alternativă este selectată implicit (adevărat / fals);
selectat - alternativa a fost selectată de utilizator (adevărat / fals).

La prima vedere, nu este foarte clar de ce un programator ar putea avea nevoie de un astfel de obiect, deoarece este imposibil să creați un obiect din clasa Select și, prin urmare, este imposibil să îi atribuiți un nou obiect Option. Totul este explicat atunci când vine vorba de schimbarea listei de alternative pentru un obiect Select din document. Acest lucru se poate face, iar modificarea listei de alternative Select nu duce la reformatarea documentului. Schimbarea listei de alternative vă permite să rezolvați problema creării de meniuri imbricate care nu există în formularele HTML prin programarea meniurilor obișnuite (opțiuni).

Când programați alternative, ar trebui să acordați atenție faptului că obiectele clasei Option nu au o proprietate de nume, din cauza faptului că containerul nu are Atributul NAME. Astfel, obiectele Option încorporate într-un document pot fi accesate doar ca membri ai colecției de opțiuni.

Opțiuni de colectare

Opțiunile de matrice (colecție) încorporate este una dintre proprietățile obiectului Select. Elementele acestei matrice sunt obiecte cu drepturi depline ale clasei Option. Acestea sunt create pe măsură ce browserul încarcă pagina. Numărul de obiecte Option conținute într-un obiect document.f.s din clasa Select poate fi găsit folosind proprietatea standard de matrice: document.f.s.options. lungime. În plus, obiectul Select are aceeași proprietate: document.f.s. lungime - este complet identică cu cea anterioară.

Programatorul are posibilitatea nu numai de a crea noi obiecte Option, ci și de a șterge obiectele deja create de browser:

Prima opțiune A doua opțiune A treia opțiune 5.3.

Eliminarea opțiunilor din SELECT ÎNîn acest exemplu

Când încărcăm o pagină de pe server, avem trei alternative. Acestea pot fi vizualizate ca o listă derulantă de opțiuni. După ce faceți clic pe butonul „Șterge ultima opțiune”, în formular rămân doar două alternative. Dacă faceți din nou clic pe acest buton, va mai rămâne o singură alternativă. În cele din urmă, nu vor mai fi deloc opțiuni, adică. utilizatorul va pierde alegerea. Când apăsați butonul de resetare, opțiunile nu sunt restaurate - alternativele se pierd fără urmă.

Acum, folosind constructorul Option, putem face procesul reversibil:

funcția RestoreOptions() ( document.f.s.options = opțiune nouă ("Opțiune unu","",true,true); document.f.s.options = opțiune nouă ("Opțiune a doua"); document.f.s.opțiuni = opțiune nouă ("Opțiune trei"); return false; ) Prima opțiune A doua opțiune A treia opțiune 5.4. Eliminarea și adăugarea de opțiuni din SELECT Am plasat restaurarea alternativelor în handlerul de evenimente onReset al containerului FORM. Obiecte create a clasei Option o atribuim obiectului document.f.s al clasei Select. În acest caz, prima alternativă trebuie selectată implicit (argumentul defaultSelected este setat la adevărat) pentru a simula comportamentul atunci când

bootstrap

pagini.

Proprietățile text și ale valorii obiectului Opțiune

Apare întrebarea, de ce sunt necesare două proprietăți? Faptul este că valoarea opțiunii selectate este transferată pe server. În cazul în care containerul nu are un atribut VALUE, textul valorii .selectedIndex este trimis către server și va returna indexul primei opțiuni selectate. În acest caz, există o alternativă: proprietatea selectată pe fiecare obiect Option. Este adevărat dacă această opțiune este selectată, fals în caz contrar. Un exemplu va fi dat mai jos.

Handler pentru evenimentul onChange al obiectului Select

Fructe: mere banane kiwi piersici
Poziții selectate: 5.5.

onChange handler pentru selecții multiple

Rețineți că evenimentul Modificare are loc atunci când utilizatorul selectează sau deselectează o opțiune. Excepția este atunci când opțiunile sunt marcate secvențial în timpul selecției (făcând clic pe butonul mouse-ului pe un element, deplasând mouse-ul la elementul final, eliberând butonul mouse-ului). În acest caz, evenimentul are loc în momentul în care utilizatorul eliberează butonul mouse-ului și toate alternativele marcate devin selectate.

Setează un handler de selecție de text în cadrul elementului sau, sau, declanșează acest eveniment. Acest eveniment poate avea loc numai în și elemente. Metoda are trei cazuri de utilizare: handler(eventObject) - o funcție care va fi setată ca handler. Când este apelat, va primi un obiect eveniment .

eventObject
handler(eventObject) - vezi mai sus.

eventData - date suplimentare transmise handlerului. Ele trebuie reprezentate printr-un obiect în formatul: (fNume1:valoare1, fNume2:valoare2, ...) .

Puteți elimina un handler instalat folosind metoda unbind(). Toate cele trei opțiuni pentru utilizarea metodei sunt analoge ale altor metode (vezi mai sus), deci toate detaliile folosind select

() pot fi găsite în descrierile acestor metode.

Când selectează text cu mouse-ul, browserele declanșează un eveniment de selectare când selecția este completă. Dacă selecția are loc prin apăsarea tastelor ← → ↓ în timp ce țineți apăsat shift, atunci evenimentul va avea loc de fiecare dată când tasta săgeată este eliberată. Pentru a introduce partea selectată a textului în browsere diferite necesar mijloace diferite . În FireFox și partea selectată va fi furnizată de metoda window.getSelection() sau document.getSelection(), în timp ce IE și Opera vor oferi textul solicitat la apelarea metodei document.selection.createRange(). Versiunea cross-browser va arăta astfel:

function selectedText() ( if (window.getSelection) txt = window.getSelection().toString(); else if (document.getSelection) txt = document.getSelection(); else if (document.selection) txt = document.selection .createRange().text;return txt)

Rețineți că funcția selectedText() nu va funcționa numai pentru și , ci va returna textul selectat, indiferent în ce element(ele) se află.

Exemplu

// instalează un handler de evenimente select pentru elementul cu identificatorul foo $("#foo" ) .select (funcție () ( alert ("În interiorul elementului foo, textul a fost selectat de utilizator." ) ; ) );