alistairphillips.com

I'm currently creating a 'simple' (i.e cross-phone) mobile site for a system at work. We decided against going down the fancy iPhone only route as we wanted to support as many users as possible. And as with most corporate environments many of these users have BlackBerry devices.

I've however come across a few issues, one of which was trying to manipulate a HTML select dynamically via JavaScript. Have a look at the code below which works fine in everything but a BlackBerry (tested OS4.6). Trying to remove an item from a multiple select either results in the item being indented and permanently selected or an incorrect item getting removed.

And the opposite route of adding an item results in a blank item being put into the list. All this magically fixes itself when you remove the multiple="multiple" attribute. No idea why and I can't seem to find any reason or work around for it either.

Hopefully this will save someone a bit of hair pulling.

    function add() {
        var el         = document.getElementById("test");
        var new_item   = document.createElement('option');
        new_item.value = 'E';
        new_item.text  = 'E';
        el.add(new_item, null);
    }
    function _delete() {
        var el = document.getElementById("test");
        el.remove(2);
    }

    <select name="test" id ="test" multiple="multiple">
        <option value="A">Item A</option>
        <option value="B">Item B</option>
        <option value="C">Item C</option>
        <option value="D">Item D</option>
    </select>

    <input type="button" value="Add" onclick="javascript:add();" />
    <input type="button" value="Delete" onclick="javascript:_delete();" />