Oprava nefungujícího onChange v selectu

Pokud chcete JavaScriptem hlídat výběr hodnoty ze selectu (ComboBoxu) a hned poté něco provést, možná narazíte na to, že některou (konkrétně první) položku nelze vybrat (tedy vybrat lze, ale nevyvolá požadovanou akci).

To je proto, že většina prohlížečů se vám snaží usnadnit práci a automaticky vybere první položku v seznamu. A pokud je již jednou vybrána, je logické, že při jejím opětovném výběru nedojde ke změně („change“).

Oprava je celkem jednoduchá, stačí výslovně uvést, že žádná položka nemá být vybrána:

//deselect everything from the select and
// make possible to fire onChange for any option
this.options.selectedIndex = -1;

Pokud chcete, aby to platilo při každém otevření selectu, stačí akci pověsit na onFocus událost:

select.onfocus = function() {
    //deselect everything from the select and
    // make possible to fire onChange
    this.options.selectedIndex = -1;
});
select.onchange = function() {
    //... akce při výběru hodnoty
}

Pole options je indexované od nuly (zero-indexed) takže výchozí hodnota je „selectedIndex = 0„, pokud tedy nechcete nic vybrat, musíte zadat index, který neodpovídá žádné existující hodnotě – tedy buď něco záporného nebo něco většího než kolik je položek v selectu. A k tomu se nejlépe hodí -1.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *