linkedin facebook linkedin facebook nod32

Option ob’ekti

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-04-06

Option ob’ekti

Option ob’ekti shunisi bilan qiziqki, JavaScriptning boshqa ko’pgina ob’ektlaridan farq qilgan holda u konstruktorga ega. Bu shuni bildiradiki, dasturchi o’zi Option ob’ektini yaratishi mumkin:

opt = new Option([ text, [ value, [ defaultSelected, [ selected ] ] ] ]);

Bu yerda:

text — <LI> (<LI>текст) konteynerida joylashuvchi matn satri;

value — Option ob’ekti bilan bog’liq muqobilini tanlashda serverga beriladigan qiymat;

defaultSelected — oshkora ko’rsatilmagan holda tanlangan muqobil (true/false);

selected — muqobil tanlangan (true/false).

Birinchi qaraganda dasturchiga bunday ob’ekt nima uchun kerakligi tushunarli emas, ahir Select tipidagi ob’ektni yaratish mumkin emas va shundan unga yangi OPTION ob’ektini biriktirish mumkin emas. Hammasi dokumentga ichki qurilgan Select ob’ektlari muqobillari ro’hatini o’garishi tugrisida gapirganda tushunarli bo’ladi. Buni qilish mumkin, chunki Select muqobillari ro’yhatining uo’zgarishi dokumentni qayta formatlashga olib kelmaydi. Muqobillar ro’hatining o’zgarishi HTML-formalarda bo’lmagan ichma-ich qo’yilgan menyular yaratish muammosini oddiy menyularni dasturlash (options[]) yuli bilan hal qilishga imkon beradi.
Muqobillarni dasturlashda (Option ob’ekti) shu narsaga e’tibor berish kerakki, Option ning hossalari orasida name hossasi yo’q. Bu shuni bildiradiki, ob’ektga nomi orqali murojaat qilish mumkin emas. Hossaning yo’qligi shu bilan tushuntiriladiki, OPTION konteynerida NAME atributi yo’q.  Dokumentga ichki qurilgan Option ob’ektlariga faqatgina Select ob’ektining options[] massive elementlari sifatidagina murojaat qilish mumkin.

options[]

options[] massivi – bu Select ob’ektining hossasidir. Bu massivning elementlari Option ob’ektlariniki kabi hossalarga ega bo’ladi. Hususan ular dokumentga ichki qurilgan Option ob’ektlaridir. Ular brauzer tomonidan sahifani yuklanishi bilan hosil qilinadi. Dasturchi nafaqat Optionning yangi ob’ektlarini yaratish imkoniyatiga ega, balki brauzer tomonidan yaratilgan ob’ektlarni yo’qotishi ham mumkin:

<FORM NAME=f0>

<SELECT NAME=s0>

<OPTION>Birinchi variant

<OPTION>Ikkinchi variant

<OPTION>uchinchi variant

</SELECT>

<INPUT TYPE=button VALUE="Oxirgi variantni o`chirish"

       onClick="document.f0.s0.options[document.f0.s0.length-1]=null;">

<INPUT TYPE=reset VALUE=Reset>

</FORM>

Keltirilgan misolda sahifani serverdan yuklashda uchta muqobil aniqlangan. Agar select maydoni  tanlansa, ular paydo bo’ladi. Ohirgi variantni o’chirish tugmasi ("Oxirgi variantni o`chirish")ni bosgandan keyin faqatgina ikkita muqobil qoladi. Muqobilni o’chirich tugmasini yana bir bor bosilsa, faqatgina bitta muqobil qoladi va hokazo. Va nihoyat variantlar umuman qolmaydi, yani faydalanuvchi tanlash imkoniyatidan ayriladi. Reset tugmasi muqobillar izsiz yuqotilganligini ko’rsatadi, chunki bu tugmani bosgandan keyin SELECT maydoni qayta tiklanmaydi.
Endi Option konstruktoridan foydalangan holda protsesni teskarilaymiz:

function def_f1()

{

document.f1.s1.options[0] = new Option("Birinch variant","",true,true);

document.f1.s1.options[1] = new Option("Ikkinchi variant");

document.f1.s1.options[2] = new Option("Uchinchi variant");

return false;

}

...

<FORM NAME=f1 onReset="def_f1();">

<SELECT NAME=s1>

<OPTION>Birinch variant

<OPTION>Ikkinchi variant

<OPTION>Uchinchi variant

</SELECT>

<INPUT TYPE=button VALUE="Oxirgi variantni o`chirish"

      onClick="document.f1.s1.options[document.f1.s1.length-1]=null;">

<INPUT TYPE=reset VALUE=Reset>

</FORM>

Berilgan holda biz reset hodisasi (FORM konteyneri)ni qayta ishlaymiz. Bunda Option tipidagi yangi ob’ektlar yaratamiz va ularni Select ob’ektiga bo’ysundiramiz. Bunda massivning birinchi elementi sahifani dastlabki yuklashdagi harakatni modellashtirish uchun oshkora ko’rsatilmagan holda tanlanishi kerak.
HTML-formalarda menyu osti menyularini qilish mumkin emas. JavaScript bu cheklovni chetlab o’tishga imkon beradi va select maydonini dasturlash orqali almashtirishni bajarishga imkon beradi.

length

options[] ni qayta dasturlashga oid misollarda Select ob’ektining length hossasi ko’p ishlatiladi. U tanlash maydoni uchun berilgan muqobillar sonini belgilaydi. Bu hossaning yordamida ro’yhatlarni yo’qotish va qayta tiklash mumkin.
Keyingi misolda shu hossa yordamida variantlar sonini aniqlaymiz:

<FORM NAME=f3>

Raqamli variant: <INPUT NAME=i0 SIZE=1 MAXLENGTH=1 onFocus="out();">

</FORM>

<SCRIPT>

document.f3.i0.value=document.f1.s1.length;

</SCRIPT>

SCRIPT konteyneriga e’tibor bering. U formadan keyin joylashgan. Agar uni oldinroqqa qo’ysak, u holda forma maydonlari aniqlanmay qoladi va natijada biz hatolik to’g’risidagi habarni olamiz.

selectedIndex

Select ob’ektining tanlangan variant qiymatini beruvchi hossasi selectedIndex kabi belgilanadi.

<FORM>

Variant:

<SELECT NAME=s0 onChange="form.elements[1].value=selectedIndex;">

<OPTION>Birinchi

<OPTION>Ikkinchi

</SELECT>

Index belgilash:

<INPUT SIZE=1 maxlength=1>

</FORM>

Bu misolda hodisalarni qayta ishlovchilarga e’tibor bering. onChange qayta ishlovchini o’zini keyinroq tushuntiramiz. Hozircha asosiysi bu emas. Joriy formaning elementlariga qanday murojaat qilayotganimizni ko’ring. Birinchidan, biz form nomidan foydalanayapmiz. U maydon qarashli bo’lgan Form ob’ektini ko’rsatadi. Ikkinchdan, biz formaning ikkinchi elementini ko’rsatayapmiz. Bu vaqtda u aniqlangan emas, lekin hodisa biz variantni tanlaganimizdan keyingina ro’y beradi. Bu vaqtga kelganda maydon aniqlangan bo’ladi. Uchinchidan, biz formani to’la ismini ko’rsatmasdan, selectedIndexni ko’rsatamiz. Bu yerda u joriy formaga tegishli bo’ladi.

onChange

change hodisasi Select ob’ektidagi tanlangan indeksning qiymati o’zgartirilgan paydta sodir bo’ladi. Biz bu sahifadagi yagona variantni tanlash maydonidagi bu indeksni o’zgarishi bilan birnecha marta duch keldik (selectedIndex va options[]). Bu hodisa SELECT konteynerining onChange atributida ko’rsatilgan JavaScript-dastur tomonidan qayta ishlanadi. Bu jihatdan agar biz SELECT konteynerining multiple bilan ishlasak nima bo’lishini kuzatish qiziqarli:

<FORM>

Kantselyariya tovarlari to’plami:

<SELECT onChange="form.elements[1].value='';

for(i=0;i<form.elements[0].length;i++)

if(form.elements[0].options[i].selected==true)

form.elements[1].value = form.elements[1].value+i;"multiple>

<OPTION>Variant 1

<OPTION>Variant 2

<OPTION>Variant 3

<OPTION>Variant 4

<OPTION>Variant 5

<OPTION>Variant 6

<OPTION>Variant 7

</SELECT>

Variantlarni tanlash:

<INPUT NAME=s1 SIZE=7 MAXLENGTH=7 onFocus="form.elements[1].blur();">

</FORM>

Shunga e’tibor beringki, change hodisasi tanlsh yoki muqobilni rad qilish ro’y berayotgan hollarda bo’ladi. Variantlar ketma-ket belgilab boriladigan holgina bundan mustasno. Bu holda hodisa foydalanuvchi sichqoncha tugmasini qo’yib yuborishi bilan ro’y beradi va barcha belgilangan muqobillar tanlangan hisoblanadi.

selected

Option ob’ektining selected hossasi, uning yordamida kantselyariya asboblari to’g’risidagi misol qurilgan edi,  ikki qiymatni qabul qilishi mumkin: to’g’ri (true) yoki yolg’on (false). Misolda biz tanlangan muqobilning indeksini bosib chiqaramiz, agar Option ob’ektining selected hossasining qiymati true bo’lsa:

if(form.elements[0].options[i].selected==true)

...

Umuman olganda, selected hossasi aynan ko’p tanlovli maydonlar bo’lgan holatlar uchun qiziqarli. Yagona variantni tanlash kerak bo’lgan hollarda uni Select ob’ektining selectedIndex hossasiga ko’rsatgan holda olish mumkin.

1255 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений