logo

Použití číselných hodnot k výběru položky z rozevíracího pole s JavaScriptem

Na své webové stránce mám velké množství rozbalovacích polí. Jedno z těchto rozevíracích polí se používá pro jednu vybranou hodnotu ze seznamu možností.

<SELECT id="Box0" name="">

<OPTION value="1920">my weird description</OPTION>

<OPTION value="1225">other weird description</OPTION>

<OPTION value="3112">some name dynamically fetched</OPTION>
</SELECT>

Jak mohu přidat událost do této sekce, takže když je zaostřená, mohl bych k výběru možnosti použít numerické klávesy jako 1,2.. místo použití myši nebo kláves se šipkami pro výběr možnosti? Pro upřesnění:pokud stisknu 1 na mé klávesnici by se vybraná hodnota stala první hodnotou z tohoto seznamu s 2 vybraná hodnota se stane druhou hodnotou z tohoto seznamu.

Rozhodl jsem se nepoužívat knihovnu/rámec, jako je JQuery/Mootools.

Odpověď

Myslím, že to může vyřešit váš problém

<html>
<head>
<script type="text/javascript">
    function selectvalue(e){
        e = e || event;

        var key = e.which || e.keyCode;

        if(!e.shiftKey && key >= 48 && key <= 57){
            var option = this.options[key - 48];
            if(option){
                option.selected = "selected";
            }
        }
    }
</script>
</head>
<body>

    <SELECT id="Box0" name="" onkeypress="selectvalue.apply(this, arguments)">
        <OPTION value="1920">my weird description</OPTION>
        <OPTION value="1225">other weird description</OPTION>
        <OPTION value="3112">some name dynamically fetched</OPTION>
    </SELECT>

</body>
</html>

Javascript vypadá trochu chaoticky, protože musí zvládnout IE a všechny ostatní prohlížeče.

IE nepředá objekt události do funkce handleru, místo toho musíme použít objekt globální události.

Stejným způsobem je kód klíče také uložen v keyCode místo which v IE.