Why is my HTML replacement assignation not working?

Question

When a selection is made, I want to replace the current content with other content. I am trying to replace (for now), a change from a previous selection to "Tom Sawyer will be added later" when "Tom Sawyer" is selected from the drop down. But it is not working - the existing HTML (HuckFinn) remains in the div. Here is the pertinent code:

$('#fictionDropDown').change(function () {
    configLoading();
    var sel = this.value;
    if ((sel == "HuckFinn") && (currentFictionSelection != "HuckFinn")) {
        $('#FictionContent').load('Content/HuckFinn.html');
        currentFictionSelection = "HuckFinn";
    }
    else if ((sel == "TomSawyer") && (currentFictionSelection != "TomSawyer")) {
        $("#FictionContent").empty();
        $('#FictionContent').html('Tom Sawyer will be added later');
        currentFictionSelection = "TomSawyer";
    }

...and HTML:

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Fiction">Fiction</a></li>
        <li><a href="#tab-Nonfiction">Nonfiction</a></li>
        <li><a href="#tab-MiscTwain">Miscellaneous</a></li>
        <li><a href="#tab-Media">Media</a></li>
    </ul>
    <div id="tab-Fiction">
        <select id="fictionDropDown">
            <option value="HuckFinn">Huck Finn</option>
            <option value="TomSawyer">Tom Sawyer</option>
            <option value="tPatP">Prince and the Pauper</option>
            <option value="ConnYank">Connecticut Yankee</option>
            <option value="Gilded">The Gilded Age</option>
            <option value="Puddnhead">Pudd'nhead Wilson</option>
            <option value="ShortStories">Short Stories</option>
        </select>
        <div id="FictionContent" class="clearfix">Content in Fiction tab</div>
    </div>

It would help if there were a way to debug this code. I've got breakpoints in the code, but none of them are hit.

Anyway, why does emptying the html and then setting it to "Tom Sawyer will be added later" not work?

Answer 1

Initialize currentFictionSelection with a value and now everything works fine:

var currentFictionSelection = 'somevalue';

$('#fictionDropDown').change(function () {
    //configLoading();
    var sel = this.value;
    if ((sel == "HuckFinn") && (currentFictionSelection != "HuckFinn")) {
        alert('foo');
        $('#FictionContent').load('Content/HuckFinn.html');
        currentFictionSelection = "HuckFinn";
    } else if ((sel == "TomSawyer") && (currentFictionSelection != "TomSawyer")) {
        alert('bar');
        $("#FictionContent").empty();
        $('#FictionContent').html('Tom Sawyer will be added later');
        currentFictionSelection = "TomSawyer";
    }
});

Demo: http://jsfiddle.net/BenjaminRay/u8rz59Lm/