JQuery Replace div with Original Content

Question

I have a drop-list list that calls different actions as such:

$('#Select').change(function () {
            var n = $(this).val();
            switch (n) {
                case '1':
                    // Action
                    break;
                case '2':
                    //Action
                    break;
                case '3':
                    //Action
                    break
            }
        });

What I want to be able to achieve is to clear any content inserted into the resulting div every time the user selects a different option in the drop down box.

I have a container where all the content is displayed that is called as a result of the dropdown selection, I would like to revert this to its original state when the page was loaded. I have tried:

var divClone = $('#Everything').clone();
        $('#Select').change(function () {
            $('#Everything').replaceWith(divClone);
            var n = $(this).val();
            switch (n) {
                case '1':
                    // Action
                    break;
                case '2':
                    // Action
                    break;
                case '3':
                    // Action
                    break;
                case 'Select a Call Type':

                    break
            }
        });

but with no luck.

Any suggestions?

Thanks in Advance.

Answer 1

You're not seeing any changes because you are replacing #Everything with a clone of itself. The net effect is no change.

Instead, you can use the html function to set the contents of the #Everything div:

var everything = $('#Everything');
$('#Select').change(function () {
    var n = $(this).val();
    switch (n) {
        case '1':
            everything.html("Hello from 1");
            break;
        case '2':
            everything.html("Hello from 2");
            break;
        case '3':
            everything.html("Hello from 3");
            break
    }
});

Working Fiddle