How do I highlight a javascript listbox item?

Question

I have a function that swaps the selected item in a select box (listbox) with the item above it which works ok but I want to make it so that the item is still selected afterwords. So if the user wanted to keep moving the item upwards in the box he could keep pressing the Move Up button.

    function moveUp() {
        var list = document.getElementById('listbox');
        var numSelected = list.selectedIndex;
        var itemSelected = list.options;            

        if (itemSelected[numSelected].id == 0) {
            alert("Can't move this up the list!");
        } else {
            if (poiArrayList[numSelected - 1] != null) {
                var tempPOI = poiArrayList[numSelected];
                poiArrayList[numSelected] = poiArrayList[numSelected - 1];
                poiArrayList[numSelected - 1] = tempPOI;
                //The line below is what I have but that doesn't seem to work.
                list.selectedIndex = numSelected;
            } else {
                alert("The listbox is empty!");
            }
        }
    }

Full code

Answer 1

Have a look here: http://jsfiddle.net/2ae9B/1/

I've added an optional parameter to generateListBox() , where you can set the index to be highlighted once the list is generated. For example:

function moveUp() {
    var list = document.getElementById('listbox');
    var numSelected = list.selectedIndex;
    ...
    ...

    // regenerate the list passing the item to select
    generateListBox(numSelected - 1);
}

and

function generateListBox(selectedIndex) {
    var selectBox = document.getElementById("listbox");
    selectBox.innerHTML = "";
    for (var i = 0; i < poiArrayList.length; i++) {
        lbAddItem(poiArrayList[i].name, i);
    }

    // you should also check that is a valid integer here
    if(selectedIndex)
        selectBox.selectedIndex = selectedIndex;
}

Hope it helps