title: What am I doing wrong that I can't get JQuery to read my xml file into a DDL?
body: <p>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.</p>
  
  <p>XML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;Genres&gt;
    &lt;Fiction&gt;
      &lt;book&gt;Sci-Fi&lt;/book&gt;
      &lt;book&gt;Fantasy&lt;/book&gt;
      &lt;book&gt;Horror&lt;/book&gt;
      &lt;book&gt;Romance&lt;/book&gt;
      &lt;book&gt;Detective&lt;/book&gt;
    &lt;/Fiction&gt;
    &lt;NonFiction&gt;
      &lt;book&gt;Autobiography&lt;/book&gt;
      &lt;book&gt;Philosophy&lt;/book&gt;
      &lt;book&gt;Cooking&lt;/book&gt;
      &lt;book&gt;Historic&lt;/book&gt;
      &lt;book&gt;Teaching&lt;/book&gt;
    &lt;/NonFiction&gt;
  &lt;/Genres&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$('#rblGenre').click( function() {
          $('#ddlSpecificGenre &gt; 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( "&lt;option&gt;" + subgenre + "&lt;/option&gt;" );
                  });
              },
              error: function() { alert( "WTF" ); }
          });
      });
  </code></pre>