Multiple Select Dropdown List

Multiple Select Drop down List doesn't work ii bb10 Theme works in jquery mobile. Please see below example of code.

<script>
function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "USA", "USA", "");
addOption(document.drop_list.Category, "Canada", "Canada", "");

}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value =='USA'){
addOption(document.drop_list.SubCat,"Alabama", "Alabama");
addOption(document.drop_list.SubCat,"Alaska", "Alaska");
addOption(document.drop_list.SubCat,"Arizona", "Arizona");
addOption(document.drop_list.SubCat,"Arkansas ", "Arkansas ");
addOption(document.drop_list.SubCat,"USA", "USA");

}
if(document.drop_list.Category.value == 'Canada'){
addOption(document.drop_list.SubCat,"Alberta", "Alberta");
addOption(document.drop_list.SubCat,"British Columbia", "British Columbia");
addOption(document.drop_list.SubCat,"Manitoba", "Manitoba");

}

function removeAllOptions(selectbox)
{
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
        //selectbox.options.remove(i);
        selectbox.remove(i);
    }
}

function addOption(selectbox, value, text )
{
    var optn = document.createElement("option");
    optn.text = text;
    optn.value = value;

    selectbox.options.add(optn);
}

</script>

<body onLoad="fillCategory();">
<form name="drop_list">
    <SELECT  NAME="Category" onChange="SelectSubCat();" >
        <Option value="">Category</option>
    </SELECT>&nbsp;
    <SELECT id="SubCat" NAME="SubCat">
        <Option value="">SubCat</option>
    </SELECT>
</form>

Any advise?!?! Thanks

blackberry / jQueryMobile-BB10-Theme

Multiple Select Dropdown List #99