What am I doing wrong that I can't get JQuery to read my xml file into a DDL?

Trying to load data into a drop down list when a user selects one of two radio buttons. the bookGenres.xml file is in the same directory as my script. I'm out of ideas.

XML:

<?xml version="1.0" encoding="utf-8" ?>
<Genres>
  <Fiction>
    <book>Sci-Fi</book>
    <book>Fantasy</book>
    <book>Horror</book>
    <book>Romance</book>
    <book>Detective</book>
  </Fiction>
  <NonFiction>
    <book>Autobiography</book>
    <book>Philosophy&开发者_JS百科lt;/book>
    <book>Cooking</book>
    <book>Historic</book>
    <book>Teaching</book>
  </NonFiction>
</Genres>

JQuery:

$('#rblGenre').click( function() {
        $('#ddlSpecificGenre > option').remove();

        $.ajax({
            type: 'GET',
            url: 'bookGenres.xml',
            dataType: 'xml',
            success: function( xml ) {
                $(xml).find( $(this).val() ).each( function() {
                    var subgenre = $(this).find('book').text();
                    $('#ddlSpecificGenre').append( "<option>" + subgenre + "</option>" );
                });
            },
            error: function() { alert( "WTF" ); }
        });
    });

Justen,

The most likely issue is that the bookgenres.xml might be in the same folder as the script, but is it in the same folder that the html page is that the jQuery is getting renered on?