dom events - Using numeric values to select item from a dropdown box with JavaScript

I have a multitude of dropdown boxes within my web page. One of these dropdown boxes is used for a single selected value out of a list of options.

<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>

How can I add an event to this section, so when it is in focus, I could use numeric keys like 1,2.. to select an option instead of using the mouse or arrow keys for selecting an option? For clarification: if I press 1 on my keyboard, the selected value would bee the first value from that list, with 2 the selected value bees second value from that list.

I choose not to use a library/framework such as JQuery/Mootools.

I have a multitude of dropdown boxes within my web page. One of these dropdown boxes is used for a single selected value out of a list of options.

<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>

I choose not to use a library/framework such as JQuery/Mootools.

Share Improve this question edited Aug 3, 2021 at 20:11 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jan 1, 2011 at 15:51 Shyam 2,3778 gold badges33 silver badges44 bronze badges

1 Why don't you rename the options to "0,1,2" instead of "none, first, second"? Then you wouldn't even need an event for that to work, as Firefox and most other popular browsers would choose 1 when you press 1. You can even use "1st, 2nd" and Firefox will select "1st" when you press 1. – LostInTheCode Commented Jan 1, 2011 at 15:55
1 +1 for saying the same thing I said before you did ;) – mplungjan Commented Jan 1, 2011 at 15:59
The e from a database and don't have a "normalized" value and can be pretty much dynamic (a value can be 15 or 1501), i limit this list though depending on user role/preferences. – Shyam Commented Jan 1, 2011 at 16:10
I edited the question to clarify that I want to add the numeric values to the amount of options, instead of values - as the values are dynamic. – Shyam Commented Jan 1, 2011 at 16:13

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You could put a 'rel' attribute on each option which would be the required key for selecting that option. So, for your example it could be:

<select id="Box0" name="">  
<option value="0" rel="0">None</option>  
<option value="1" rel="1">First</option>  
<option value="2" rel="2">Second</option>  
<option value="3" rel="x">Millionth</option>
</select>

You wouldn't be looking for the onfocus() event though, you would be looking for the onkeydown() (or similar) event on the select box, which could look something like this:

var MySelect = document.getElementById('Box0');
var MyOptions = MySelect.getElementsByTagName('option');
var KeyPressed = //detect which key has been pressed. I can't remember the
                 //specific code for this off the top of my head
for (i=0; i<MyOptions.length; ++i) {
    if (MyOptions[i].rel == KeyPressed) {
        MyOptions[i].selected = true;
    } else {
        MyOptions[i].selected = false;
    }
}

If you have less than 10 options, simply add the number to the text:

<option value="0">0 none</option>
<option value="1">1 first</option>
<option value="2">2 second</option>

or perhaps easier to read:

<option value="0">0 none</option>
<option value="1">1st</option>
<option value="2">2nd</option>

No other coding necessary

I think this can solve your problem

<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>

The javascript looks little messy because it has to handle IE and all other browsers.

IE does not pass an event object to the handler function instead we have to use the global event object.

Same way the keycode also is stored in keyCode instead of which in IE.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

dom events - Using numeric values to select item from a dropdown box with JavaScript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)