Reset dropdown lists using javascript

Question

Hello all.

I have the following scenario - a few dropdwon lists and a textbox.

I'd like to 'reset' these drop downs to their original value when a user clicks on the textbox:

Javascript:

function ResetDropDowns() 
{
    var ddlSuppliers = document.getElementById('<%=ddlSuppliers.ClientID%>');
    var ddlResponse = document.getElementById('<%=ddlResponse.ClientID%>');
    var ddlImportStatus = document.getElementById('<%=ddlImportStatus.ClientID%>');

    ddlSuppliers.selectedIndex = -1;
    ddlResponse.selectedIndex = -1;
    ddlImportStatus.selectedIndex = -1;  
}

Code behind:

tbxAutoCompleteSupplier.Attributes.Add("onFocus", "return ResetDropDowns();");  

protected void ddlSuppliers_DataBound(object sender, EventArgs e)
{
    ddlSuppliers.Items.Insert(0, 
    new ListItem("--Please Select Supplier--", "0"));
}

However, this does not seem to do the business.

Any ideas?

Answer 1

Why are you changing the index to -1 while your default item is at index 0?

ddlSuppliers.selectedIndex = 0;
ddlResponse.selectedIndex = 0;
ddlImportStatus.selectedIndex = 0; 

Should do the trick.

Update

Can you verify if the dropdowns are set? To debug the ResetDropDowns() method just type the keyword debugger at the beginning. This will break the compiler so you can step through the code.

Example:

function ResetDropDowns() 
{
    debugger; //compiler will break here
    var ddlSuppliers = document.getElementById('<%=ddlSuppliers.ClientID%>');
}

Answer 2

Hello all - this is actually because of conflict between this javascript and our CMS' jquery - all sorted now!

Resolution:

I wrapped the controls in a div (called wrapper) and then applied the .uniform to the controls within said div.

function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            $("#wrapper select, #wrapper span, #wrapper input").uniform();
        }
    }

That ensures the css is maintained.

Thanks for the suggestions though.