I have a dropdown menu in Javascript I'm trying to programmatically change, but it isn't cooperating. First of all, the text in the box remains at the first option. If I click it to bring down the dropdown, then I see the index I've set it to is highlighted. However, I can't select that option, but I can select any other option in the menu. This is the code I'm using on $(document).ready:

```
document.getElementById("filteredSubDropdown").selectedIndex = localStorage["currentMonth"];

```

EDIT: some HTML where the dropdown is created

```
<div data-role="content" id="box">
    <ul data-role="listview" data-inset="true" id="merchAccountDetails" data-theme="b" data-content-theme="b">
        <div data-role="content">
            <div id="firstDrop">
                <center><font size="4" color="Green" face="times new roman">Filter Data by:</font></center>
                <select id="filterByDropdown">
                </select>
            </div>
            <center><font size="4" color="Green">Filter Data by month:</font></center>
            <select id="filteredSubDropdown">
            </select>
            </center>
            <center><font size="4" color="Green">Filter Data by Account:</font><br>
            </center>
            <center>
            <select id="accountDropdown">
            </select>
            </center>
        </div>
        <div id="chicken">
            <center><img src="spin.gif" alt="loading.."/>Loading Data...</center>
        </div>
        <p id="finInfo">
        </p>
        <br/>
    </ul>
</div>

```