How to reset variables and rebuild DropDownList without using postback

Question

I've had this issue for very long now where I am trying to get a user input from a person via a DropDownList. It seems to work the first time(after a postback). But when I try to get the user to select a new value from the DropDownList, it seems to default back to my previously selected values. My question is how do I get the javascript code to reassign the variables to the currently newly selected values. If I do a postback it seems to work since it gets refreshed. However I don't want to do a postback everytime.

Here is my javascript code:

function getCaseFiles(canMoveExpenses) {
        //create Popup with content from div
        $('#ddlFiles').dialog({
            autoOpen: true,
            height: 'auto',
            width: 'auto',
            modal: true,
            buttons: {
                "Ok": function () {
                    debugger;
                    var dropDownList = document.getElementById("ddlCaseFilesNew");
                    var newCaseDdl = dropDownList.options[dropDownList.selectedIndex].value;
                    //alert("newCaseDdl = " + newCaseDdl);

                    var oldCaseFile = $("#hidCaseFile").val();//<asp:HiddenField id="hidCaseFile">
                    //alert(oldCaseFile);

                    if (newCaseDdl != -1) {
                        moveCasefile(canMoveExpenses, newCaseDdl, oldCaseFile);
                        $(this).dialog('close');
                        $("#viewExpensesGrid").flexReload();
                    }
                    else {
                        showMessage("Error. Please Select a Value From The Lists.");
                    }
                },
                Cancel: function () {
                    $(this).dialog('close');
                    $("#viewExpensesGrid").flexReload();
                }
            }
        });
    }

and here is my DropDownList div:

<div id="ddlFiles">
    <label>
        Select new CaseFile:</label>
    <asp:DropDownList runat="server" ID="ddlCaseFilesNew" DataSourceID="dsCaseFiles"
        DataTextField="Display" DataValueField="FileID" 
        OnPreRender="ddl_PreRender" Width="300px"/>
</div>

My function calls this div and places it inside a custom popup.

Seems my variables containing the selectedIndex isn't being updates if it is not a postback.

Answer 1

You have an interesting mix of pure JS and jQuery code. It seems that the problem is here:

var newCaseDdl = dropDownList.options[dropDownList.selectedIndex].value;

You save this value when $(document).ready is triggered.
Try this line instead:

var newCaseDdl = $("#ddlCaseFilesNew").val();

Be careful: if you use master-pages, ID of this element gonna look this: ctl00$ddlCaseFilesNew.
There are a couple of ways to avoid it: specify name or class attribute, and change selector: $("[name=ddlCaseFilesNew]").val(); or $(".ddlCaseFilesNew").val();
The second one is to specify ClientIDMode="Static" on page or control.