Question

Basically I have this select list with multiple options in it:

<select name="drop1" id="Select1" size="30">
  <?php
    for($i = 0;$i<30;$i++)
    {
       echo "<option id=\"other\" value=\"" . $i . "\"></option>\n";
    }
  ?>
</select>

I also have an input field:

<input type="text" id="inputfield"></input>

With jquery I want to accomplish the following: Whenever the inputfield is focussed and the arrow up is pressed, I want to move 1 option up in the select list. Same thing with arrow down. I already found out what jquery events to use to know when key down and up are pressed:

$('#inputfield').keydown(function(e){ //When a key is pressed..
    var code = (e.keyCode ? e.keyCode : e.which);
    if ((e.keyCode || e.which) == 40) // on key down
    {
       // Make selection go down here       
    }           
    if((e.keyCode || e.which) == 38) // on key up
    {
    // Make selection go up here
    }
});

Answer 1

I’d suggest the following:

$('#inputfield').keydown(function(e) { //When a key is pressed..
    var code = (e.keyCode ? e.keyCode : e.which),
        select = document.getElementById('Select1');
    if (code == 38) // on pressing: ↑
    {
        select.selectedIndex = select.selectedIndex + 1;
    }
    else if (code == 40) // on pressing ↓
    {
        select.selectedIndex = select.selectedIndex - 1;
    }
});

JS Fiddle demo.

Updated in response to comment left by the OP (below):

the .change() event of the selection list doesnt respond when I use the key up and key down method.

In order to trigger the change event, simply use trigger(); also, in the following code, I’ve added sanity checks to try and ensure that the key-up/key-down will only happen, and therefore only trigger a change event, when the select option’s selected option can actually change:

$('#inputfield').keydown(function(e) { //When a key is pressed..
    var code = (e.keyCode ? e.keyCode : e.which),
        select = document.getElementById('Select1'),
        current = select.selectedIndex,
        last = $(select).find('option:last').index();
    if (code == 38 && current < last) // on key down
    {
        select.selectedIndex = current + 1;
        $(select).trigger('change');
    }
    else if (code == 40 && current > 0) // on key up
    {
        select.selectedIndex = current - 1;
        $(select).trigger('change');
    }
});​

JS Fiddle demo.