, bu əlaqəni müəyyən edir. O, daha sonra ehtiva edən elementlərə çatdırılacaq: bəlkə də element Element və Document obyektinin özü. Bəzən bir hadisə idarəedicisini Sənəd obyektində və ya digər konteyner elementində qeydiyyatdan keçirmək maraq doğuran bütün elementlərdə qeydiyyatdan keçməkdən daha rahatdır.
Bəzi terminləri müəyyən etdikdən sonra hadisələr və onların işlənməsi ilə bağlı məsələlərin araşdırılmasına keçə bilərik.
Hadisə İşləyicilərinin Qeydiyyatı Hadisə idarəçilərini qeydiyyatdan keçirməyin iki əsas yolu var. Birincisi, World Wide Web-in inkişafının əvvəlində ortaya çıxdı, hadisənin hədəfi olan obyektin və ya sənəd elementinin xassəsini təyin etməkdir. İkinci üsul, daha yeni və daha universaldır, işləyicini obyekt və ya elementin metoduna ötürməkdir.
Məsələ hər bir texnikanın iki versiyasının olması ilə mürəkkəbdir. Hadisə idarəedici xüsusiyyəti JavaScript kodunda və ya sənəd elementində birbaşa HTML işarələməsində müvafiq atributu təyin etməklə təyin edilə bilər. Metod çağırışı ilə işləyicilərin qeydiyyatı IE 8 və daha aşağı versiyaları istisna olmaqla bütün brauzerlər tərəfindən dəstəklənən addEventListener() adlı standart metod və IE9-a qədər IE-nin bütün versiyaları tərəfindən dəstəklənən attachEvent() adlı başqa bir üsulla həyata keçirilə bilər.
Hadisə idarəedici xüsusiyyətlərinin qurulması Hadisə idarəedicisini qeydiyyatdan keçirməyin ən sadə yolu hadisə hədəfinin xassəsini istədiyiniz işləyici funksiyasına təyin etməkdir. Konvensiyaya görə, hadisə idarəedici xüsusiyyətlərində "on" sözündən sonra hadisə adından ibarət adlar var: onclick, onchange, onload, onmouseover və s. Qeyd edək ki, bu xassə adları böyük hərflərə həssasdır və hətta hadisə növü adı çox sözdən ibarət olduqda belə yalnız kiçik hərflərdən istifadə edir (məsələn, "readstatechange"). Aşağıda hadisə işləyicilərinin qeydiyyata alınmasının iki nümunəsi verilmişdir:
// Funksiyanı Window obyektinin onload xassəsinə təyin edin. // Funksiya hadisə idarəedicisidir: sənəd yükləndikdə çağırılır window.onload = function() ( // Elementi tap var elt = document.getElementById("göndərmə_ünvanı"); // Hadisə idarəedicisini qeydiyyatdan keçirin. elt.onsubmit = function() formasını təqdim etməzdən əvvəl birbaşa // çağırılmalıdır ( qaytarın validate(this); ) )
Hadisə idarəedicilərinin qeydiyyatının bu üsulu bütün tez-tez istifadə olunan hadisə növləri üçün bütün brauzerlərdə dəstəklənir. Ümumiyyətlə, hadisələri təyin edən bütün geniş şəkildə dəstəklənən proqram interfeysləri, hadisə idarəedicilərinin xüsusiyyətlərini təyin etməklə işləyicilərə qeydiyyatdan keçməyə imkan verir.
Hadisə idarəedici xüsusiyyətlərindən istifadənin dezavantajı ondan ibarətdir ki, onlar hadisə hədəflərinin hər bir hadisə növü üçün ən çox bir idarəçiyə malik olacağı fərziyyəsi ilə tərtib edilmişdir. İxtiyari sənədlərdə istifadə üçün kitabxana yaratarkən, əvvəllər qeydə alınmış işləyiciləri dəyişdirməyən və ya onların üzərinə yazmayan işləyiciləri qeydiyyata almaq üçün texnikadan (məsələn, addEventListener() metodunu çağırmaq) istifadə etmək daha yaxşıdır.
Hadisə idarəedici atributlarının qurulması Sənəd elementlərindəki hadisə işləyicilərinin xassələri müvafiq HTML teqlərində atribut dəyərlərini təyin etməklə də təyin edilə bilər. Bu halda, atribut dəyəri JavaScript kodunun sətri olmalıdır. Bu proqram kodu hadisə idarəedici funksiyasının tam bəyanı deyil, yalnız onun gövdəsi olmalıdır. Yəni, hadisə idarəedicisinin HTML işarələməsində tətbiqi əyri mötərizələrə daxil edilməməli və funksiya açar sözündən əvvəl olmamalıdır. Misal üçün:
Hadisə idarəedicisinin HTML atributunun dəyəri çoxlu JavaScript ifadələrindən ibarətdirsə, onlar nöqtəli vergüllə ayrılmalıdır və ya atribut dəyəri bir neçə sətirdə görünməlidir.
Bəzi hadisə növləri hər hansı xüsusi sənəd elementi üçün deyil, bütövlükdə brauzer üçün nəzərdə tutulub. JavaScript-də bu cür hadisələrin işləyiciləri Window obyektində qeydə alınır. HTML işarələməsində onlar teqdə yerləşdirilməlidir, lakin brauzer onları Window obyektində qeyd edəcək. Aşağıda layihə HTML5 spesifikasiyası ilə müəyyən edilmiş belə hadisə idarəedicilərinin tam siyahısı verilmişdir:
onafterprint onfocus online onölçməniölçməkdənəvvəlçap etmədənhashdəyişikliksəhifədə yaddaşı gizlətBoşaltmadan əvvəl yükləmə onsəhifədəgöstərmək onundo onbulanıklaşdırmaq onmessage onpopstate onunyükləmə xətası onoffline onredo
Müştəri tərəfi skriptləri hazırlayarkən, HTML işarələməsini JavaScript kodundan ayırmaq ümumi təcrübədir. Bu qaydaya əməl edən proqramçılar JavaScript kodunu HTML işarələməsi ilə qarışdırmamaq üçün HTML hadisə idarəedici atributlarından istifadə etməkdən çəkinirlər (yaxud ən azı bundan çəkinməyə çalışırlar).
addEventListener() IE 8 və daha aşağı versiyaları istisna olmaqla, bütün brauzerlər tərəfindən dəstəklənən standart hadisə modelində hadisənin hədəfi istənilən obyekt ola bilər – Pəncərə və Sənəd obyektləri və sənəd elementlərinin bütün Elements obyektləri daxil olmaqla – hansı hadisə ilə addEventListener() adlı metodu müəyyən edir. işləyicilər bu məqsədlə qeydiyyatdan keçə bilərlər.
addEventListener() metodu üç arqument qəbul edir. Birincisi, işləyicinin qeydiyyatdan keçdiyi hadisə növüdür. Hadisə növü (və ya adı) sətir olmalıdır və hadisə işləyicilərinin xassələrini təyin edərkən istifadə olunan "on" prefiksini daxil etməməlidir. addEventListener() metodunun ikinci arqumenti müəyyən edilmiş növ hadisə baş verdikdə çağırılmalı olan funksiyadır. Son arqument mantiq dəyəri ilə addEventListener() metoduna ötürülür. Adətən bu arqument yanlışdır. Əgər onu doğru qəbul etsəniz, funksiya müdaxilə işləyicisi kimi qeydə alınacaq və hadisənin yayılmasının başqa mərhələsində çağırılacaq.
Spesifikasiya nəhayət dəyişilə bilər ki, üçüncü arqumenti açıq şəkildə yanlış ötürməkdənsə, onu buraxmaq məqbul olsun, lakin bu yazıya görə üçüncü arqumentin buraxılması bəzi cari brauzerlərdə xəta ilə nəticələnir.
Aşağıdakı fraqment elementdə iki "klik" hadisə işləyicisini qeyd edir. İstifadə olunan iki texnika arasındakı fərqlərə diqqət yetirin:
Mənə klikləyin! var b = document.getElementById("mybutton"); b.onclick = function() ( alert("Mənə kliklədiyiniz üçün təşəkkürlər!"); ); b.addEventListener("klik", funksiya() (alert("Yenidən təşəkkürlər!")), false);
addEventListener() funksiyasının birinci arqument kimi "klik" sətri ilə çağırılması onclick xassəsinin dəyərinə heç bir təsir göstərmir. Yuxarıdakı fraqmentdə düyməyə kliklədikdə iki alert() dialoq qutusu görünəcək. Lakin daha da önəmlisi, addEventListener() metodu bir neçə dəfə çağırıla bilər və eyni obyektdə eyni hadisə növü üçün çoxlu işləyici funksiyaları qeydiyyatdan keçirmək üçün istifadə edilə bilər. Obyektdə hadisə baş verdikdə, həmin hadisə növü üçün qeydiyyatdan keçmiş bütün işləyicilər qeydiyyata alındıqları ardıcıllıqla çağırılacaq.
Eyni arqumentlərlə eyni obyektdə addEventListener() funksiyasının bir neçə dəfə çağırılması heç bir təsir göstərmir - işləyici funksiyası yalnız bir dəfə qeydə alınır və təkrar zənglər işləyicilərin çağırılma sırasına təsir etmir.
addEventListener() metodu ilə qoşalaşmış removeEventListener() metodu eyni üç arqumenti qəbul edir, lakin əlavə etmək əvəzinə obyektdən işləyici funksiyasını silir. Bu, tez-tez müvəqqəti hadisə idarəedicisini qeydiyyatdan keçirməli və sonra onu nə vaxtsa silmək lazım olduqda faydalıdır.
IE9-dan əvvəlki Internet Explorer versiyaları addEventListener() və removeEventListener() metodlarını dəstəkləmir. IE5 və daha sonra oxşar metodları müəyyən edir, attachEvent() və detachEvent() . IE hadisə modeli ələ keçirmə mərhələsini dəstəkləmədiyinə görə, attachEvent() və detachEvent() metodları yalnız iki arqument götürür: hadisə növü və işləyici funksiyası, birinci arqument “on” prefiksli işləyici xassəsinin adını “on” ilə ötürür. bu prefikssiz tip hadisələri deyil, IE-də üsullar.
Hadisə idarəçilərinə zəng Hadisə idarəedicisini qeydiyyatdan keçirdikdən sonra veb-brauzer göstərilən obyektdə göstərilən növdə hadisə baş verdikdə onu avtomatik olaraq çağıracaq. Bu bölmə hadisə idarəedicilərinin çağırılma sırasını, işləyicilərə arqumentləri, çağırışın kontekstini (bunun dəyəri) və işləyicinin qaytarma dəyərinin məqsədini təfərrüatlandırır. Təəssüf ki, bu təfərrüatların bəziləri IE 8 və aşağı versiyaları və digər brauzerlər arasında fərqlənir.
Hadisə İşləyicisi Arqumenti Hadisə idarəedicisi işə salındıqda, adətən (bir istisna olmaqla, aşağıda müzakirə olunur) hadisə obyekti tək arqument kimi ötürülür. Hadisə obyektinin xassələri hadisə haqqında əlavə məlumatları ehtiva edir. Tip xassəsi, məsələn, baş verən hadisənin növünü müəyyən edir.
IE 8 və daha aşağı versiyalarda, xassə təyin etməklə qeydə alınan hadisə idarəediciləri çağırılan zaman hadisə obyekti ötürülmür. Bunun əvəzinə hadisə obyekti qlobal dəyişən window.event-də saxlanılır. Daşınma üçün hadisə idarəçiləri aşağıdakı kimi tərtib edilə bilər ki, onlar arqumentsiz çağırılanda window.event dəyişənindən istifadə etsinlər:
Hadisə obyekti attachEvent() metodu ilə qeydiyyatdan keçmiş hadisə işləyicilərinə ötürülür, lakin onlar window.event dəyişənindən də istifadə edə bilərlər.
HTML atributundan istifadə edərək hadisə idarəedicisini qeydiyyatdan keçirdiyiniz zaman brauzer JavaScript kodunun sətirini funksiyaya çevirir. IE-dən başqa brauzerlər bir arqument, hadisə ilə funksiya yaradır. IE heç bir arqument qəbul etməyən bir funksiya yaradır. Əgər belə funksiyalarda hadisə identifikatorundan istifadə etsəniz, o, window.event-ə istinad edəcək. Hər iki halda, HTML işarələməsində müəyyən edilmiş hadisə idarəçiləri hadisə identifikatorundan istifadə edərək hadisə obyektinə istinad edə bilərlər.
Hadisə İşləyicisi Konteksti Hadisə idarəedicisi xassə təyin etməklə qeydə alındıqda, yeni sənəd elementi metodunu təyin etmək kimi görünür:
E.onclick = function() ( /* işləyicinin icrası */ );
Buna görə də təəccüblü deyil ki, hadisə idarəediciləri (aşağıda təsvir olunan IE ilə bağlı bir istisna olmaqla) müəyyən olunduğu obyektlərin metodları kimi çağırılır. Yəni hadisə idarəçisinin korpusunda this açar sözü hadisənin hədəfinə istinad edir.
İşləyicilərdə this açar sözü, hətta addEventListener() metodu ilə qeydiyyatdan keçdikdə belə, hədəf obyektə istinad edir. Lakin, təəssüf ki, bu, attachEvent() metodu üçün belə deyil: attachEvent() metodu ilə qeydiyyatdan keçmiş işləyicilər funksiyalar kimi adlanır və onlarda this açar sözü qlobal (Window) obyektinə istinad edir. Bu problemi aşağıdakı şəkildə həll etmək olar:
/* Müəyyən edilmiş funksiyanı göstərilən obyektdə göstərilən tipli hadisə idarəedicisi kimi qeyd edir. İşləyicinin həmişə hədəf obyektdə metod kimi çağırılacağını təmin edir. */ funksiyası addEvent(hədəf, tip, işləyici) ( əgər (target.addEventListener) target.addEventListener(növ, işləyici, false); else target.attachEvent("on" + növü, funksiya(hadisə) ( // İşləyiciyə zəng edin hədəf metodu olaraq // və ona hadisə obyekti qaytarın handler.call(hədəf, hadisə ));
Qeyd edək ki, bu şəkildə qeydə alınmış hadisə idarəediciləri silinə bilməz, çünki attachEvent() metoduna ötürülən sarğı funksiyasına istinad heç bir yerdə saxlanmır ki, o, detachEvent() metoduna ötürülə bilsin.
Handler qaytarılan dəyərlər Obyekt xassəsini təyin etməklə və ya HTML atributu ilə qeydə alınmış hadisə idarəedicisi tərəfindən qaytarılan dəyər nəzərə alınmalıdır. Tipik olaraq, false qaytarılması brauzerə bu hadisə üçün standart hərəkətləri yerinə yetirməməli olduğunu bildirir.
Məsələn, formanı göndərmə düyməsinin klikləmə idarəçisi brauzerin formanı təqdim etməsinin qarşısını almaq üçün false qaytara bilər. (İstifadəçinin daxiletməsi müştəri tərəfi doğrulamada uğursuz olarsa, bu faydalı ola bilər.) Eynilə, giriş sahəsinin düyməyə basma hadisəsi idarəedicisi yanlış simvollar daxil edildikdə yalanı qaytarmaqla klaviatura daxiletməsini süzgəcdən keçirə bilər.
Pəncərə obyektinin yüklənmədən əvvəl işləyicisi tərəfindən qaytarılan dəyər də vacibdir. Bu hadisə brauzer başqa səhifəyə keçdikdə yaradılır. Bu işləyici sətir qaytararsa, o, istifadəçidən səhifəni tərk etmək istədiklərini təsdiqləməsini tələb edən modal dialoq qutusunda göstəriləcək.
Anlamaq vacibdir ki, hadisə idarəedicilərinin qaytarma dəyərləri yalnız işləyicilər xassələri təyin etməklə qeydə alındıqda sayılır. addEventListener() və ya attachEvent() ilə qeydiyyatdan keçmiş işləyicilər əvəzinə preventDefault() metodunu çağırmalı və ya hadisə obyektinin returnValue xassəsini təyin etməlidir.
Tədbirlərin ləğvi Mülk olaraq qeydə alınmış hadisə idarəedicisi tərəfindən qaytarılan dəyər həmin hadisə baş verdikdə brauzerin defolt hərəkətlərini ləğv etmək üçün istifadə edilə bilər. addEventListener() metodunu dəstəkləyən brauzerlərdə defolt hərəkətlər hadisə obyektinin preventDefault() metodunu çağırmaqla da ləğv edilə bilər. Bununla belə, IE 8 və daha aşağı versiyada eyni effekt hadisə obyektinin returnValue xassəsini false olaraq təyin etməklə əldə edilir.
Aşağıdakı fraqment hadisəni ləğv etmək üçün hər üç üsuldan istifadə edən (istifadəçinin linki izləməsinə mane olan) hiperlink klik hadisəsi işləyicisini nümayiş etdirir:
Window.onload = function() ( // Bütün bağlantıları tap var a_href = document.getElementsByTagName("a"); // Klik hadisəsi idarəedicisi əlavə edin (IE üçün deyil)
Cari DOM Events 3 modul layihəsi hadisə obyektində defaultPrevented adlı xassə müəyyən edir. O, hələ bütün brauzerlər tərəfindən dəstəklənmir, lakin onun mahiyyəti ondan ibarətdir ki, normal şəraitdə o, yalançıdır və yalnız preventDefault() metodu çağırıldıqda doğru olur.
Tədbirlə bağlı defolt hərəkətləri ləğv etmək hadisəni ləğv etməyin yalnız bir növüdür. Hadisənin yayılmasının qarşısını almaq da mümkündür. AddEventListener() metodunu dəstəkləyən brauzerlərdə hadisə obyektində stopPropagation() metodu var və bu metod çağırıldıqda hadisənin sonrakı yayılmasını dayandırır. Bu hadisə üçün digər işləyicilər eyni hədəf obyektdə qeydiyyatdan keçibsə, qalan işləyicilər hələ də çağırılacaq, lakin stopPropagation() metodu çağırıldıqdan sonra digər obyektlərdəki heç bir hadisə idarəediciləri çağırılmayacaq.
IE 8 və daha aşağı versiyalarda stopPropagation() metodu dəstəklənmir. Əvəzində IE-də hadisə obyekti xassə malikdir ləğv Bubble. Bu xassəni doğru olaraq təyin etmək hadisənin yayılmasının qarşısını alır.
DOM Events 3 spesifikasiyasının cari layihəsi Event obyektində stopImmediatePropagation() adlı başqa metodu müəyyən edir. StopPropagation() metodu kimi, hadisənin hər hansı digər obyektlərə yayılmasının qarşısını alır. Bununla yanaşı, eyni obyektdə qeydiyyatdan keçmiş hər hansı digər hadisə idarəedicilərinin çağırılmasının qarşısını alır.
Sizdə aşağıdakı klaviatura dinləyicisi ArrowDown hadisəsi var (bu açar kodu 40-dır):
Window.onload = function() ( var itemsContainer = document.getElementById("cities-drop"); document.addEventListener("*****",function(event)( əgər (event.keyCode == 40 && itemsContainer. style.display=="block") ( event.preventDefault(); üçün (var i=0;i)
bu halda, sürüşdürmə ArrowDown düyməsini basdıqdan sonra siyahıda sonuncu elementə keçir.
Əgər fasilə şərh edilməmişsə, o, ikinci elementə keçir və artıq atılmır.
Bunu necə etmək, dinləyicinin həmişə dinləməsi prinsipini əldə etmək mümkün deyil...
EDIT canlı demo mümkündür, bu, bağlanma məsələsidir, amma əmin deyiləm
3 cavab
Kodunuza baxdıqdan və nə etməyə çalışdığınızı başa düşdükdən sonra, məncə, səhviniz indexOf istifadə etməli olduğunuz yerdə substr istifadə edir. Budur yenilənmiş xətt:
Əgər (itemsContainer.getAttribute("class").indexOf("hovered") != -1) Ətraflı təfərrüatlar: Siz əslində başlanğıc indeksi üçün sətir dəyəri ilə substr istifadə etdiniz. Bunun nəticəsinin nə olacağına əmin deyiləm, lakin görünür -1 deyil, çünki şərt hər dəfə doğru qayıtdı və növbəti elementin HƏR DƏFƏ, siyahının sonuna qədər asılı olmasına səbəb oldu. Bir fasilə ifadəsindən istifadə edərək, birinci elementdə if ifadəsini icra etdi (ikinci elementin asılmasına səbəb oldu) və sonra çıxdı.
Kodunuzu düzəltdikdən sonra fasilə ifadəsini orada qoyurdum ki, dövrə öz uyğunluğunu tapdıqdan sonra dayansın və qalan elementlər arasında lazımsız şəkildə təkrarlanmasın.
EDİLƏ: Kodda daha bir neçə problem tapdım. Ən azı IE və FF-də mənim üçün işləyən bir nümunə (Safari, Opera və ya Chrome-da sınaqdan keçirilməyib):
Təfərrüatlar: IE9-da mənim üçün funksiya heç vaxt çağırılmadı. Əvəzində onu adi funksiyaya çevirdim və bədən etiketinə onkeydown hadisəsi əlavə etdim.
if-ifadənizdə itemsContainer.getAttribute("class") var. Əvvəlcə itemsContainer.children[i] istifadə etməlisiniz. İkincisi, .getAttribute("class") IE-də mənim üçün işləmədi, ona görə də onu sadəcə .className ilə dəyişdim.
Nəhayət, itemsContainer.children[i].nextSibling mənim üçün işləmədi, lakin növbəti bacı əldə etmək üçün onu sadəcə itemsContainer.children olaraq dəyişmək kifayət qədər sadədir.
Döngədən istifadə etmək əvəzinə, daha sadə bir yanaşma cəhd edə bilərsiniz:
Window.onload = function() ( var itemsContainer = document.getElementById("cities-drop"); document.addEventListener("*****",function(event) (əgər (event.keyCode == 40 && itemsContainer. style.display=="block") ( event.preventDefault(); var previousHoveredChoice = itemsContainer.querySelector(".hovered"); previousHoveredChoice.className = ""; var currentHoveredChoice = previousHoveredChoice.nextSibling; əgər (currentHoveredChoice)(ice.curedChoice) className = "hovered"; ) ) )); //aşağıdakı kod canlı nümunədən kopyalanıb //sadəcə bu həlldə yükləmə funksiyasının işləyicisini bağlamaq üçün.addEventListener("*****",function(event ) ( əgər (event.keyCode == 27) ( if (document.getElementById("cities-drop").style.display=="block")( document.getElementById("cities-drop").style.display= " heç biri"; ))) ); //kopyala-yapışdırılmış kodun sonu);
Problem ola biləcəyini gördüyüm bir neçə şey var. İlk növbədə, siz itemsContainer.children[i].nextSibling-i yeniləyirsiniz, bu da itemsContainer.children-ə bərabərdir. Buna görə də, fasiləni qaçırdığınız təqdirdə sonuncu element həmişə seçilir. Əgər sinifə uyğun element varsa, itemsComtainer həmişə asılacaq.
İkinci problem Travestinin3 cavabında nəyi qeyd edir.
Mən həmçinin, əyləşən sinifin konteynerin özündə deyil, uşaqlardan birində olub-olmadığını yoxlamaq üçün if şərtini dəyişdim.
Əgər (itemsContainer.children[i].getAttribute("class").match("overed"))
Hadisə idarəedicisini aşağıdakı kod sətirləri ilə dəyişdirdim və yaxşı işləyir:
Document.addEventListener("*****",function(event)( əgər (event.keyCode === 40 && itemsContainer.style.display==="blok") ( event.preventDefault(); üçün (var i) =0,l=itemsContainer.children.length;i
Nəzərə alın ki, belə bir aşağı endirmə nəzarəti yaratmaq olduqca böyük işdir. İstifadəçi klaviaturadan istifadə edərək orada naviqasiya etməyi gözləyir. Mükəmməl istifadəçi interfeysi yaratmaq üçün ox düymələri, diqqəti yönəltmək üçün nişan, onu açmaq və bağlamaq üçün boşluq, ilk uyğun gələn elementə diqqət yetirmək üçün hərf-rəqəm daxiletmə və s. kimi bir neçə düyməni idarə etməlisiniz.
Əgər istifadəçi təcrübəsi vacibdirsə, bunun üçün çərçivə və plagindən istifadə etməyi tövsiyə edərdim. Mən şəxsən jquery və jquery ui-yə üstünlük verirəm və açılanlardan seçmək üçün bir neçə plagin var. Digər bir üstünlük ondan ibarətdir ki, əgər javascript müştəri tərəfindən söndürülübsə və ya javascriptiniz nədənsə səhvdirsə, əksər plaginlər yenə də yaxşı işləyəcək normal yerli seçim elementinə qayıdırlar.
Mən özüm bu selectbox plaginini sadə açılan siyahı üçün istifadə etmişəm: http://www.abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
Redaktə: Birdən çox element eyni ada malik olduqda işləməyəcəyi üçün bu tövsiyəni geri qaytarıram. Bu vacibdirsə, Filament Group selectmenu plaginini yoxlamalısınız: http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ //Düzəliş etmək
Yazılı girişi də dəstəkləyən Combobox üçün jQuery avtomatik tamamlama plagini: http://jqueryui.com/demos/autocomplete/
