Geben Sie einen <option> Tag eine Klasse? API-Aufruf funktioniert nicht

Question

Ich übe API-Aufrufe mit AJAX und JavaScript/jQuery. Ich verwende derzeit die Random User API (https://randomuser.me/). Aus irgendeinem Grund wird der AJAX-Aufruf nicht ordnungsgemäß ausgeführt, wenn ich versuche, Benutzer nach Nationalität anzurufen. Ich frage mich, ob es daran liegt, dass ich den Tags Klassen von "Nationalität" gebe? Zuerst gab ich dem Tag diese Klasse, aber ich dachte, das war nicht ganz richtig. Wo gehe ich hier falsch? Jeder Benutzer, den ich anrufe, ist Australier, weil diese Nationalität nur zufällig auf der Liste steht. Kann mir jemand Tipps geben, wie man die API richtig aufruft?

Hier ist mein HTML:

<h1> Random Person Generator </h1> 
    <div class = "info"> 
     <p> Generate a Random Person! </p> 
      <form class = "zipform"> 
      <p> Nationality? </p> 
       <select name = "nationality"> 
        <option value = "au" class ="nationality">Australian</option> 
        <option value = "br" class ="nationality">Brazilian</option> 
        <option value = "ca" class ="nationality">Canadian</option> 
        <option value = "ch" class ="nationality">Swiss</option> 
        <option value = "de" class ="nationality">German </option> 
        <option value = "dk" class ="nationality">Norweigan </option> 
        <option value = "es" class ="nationality"> Spanish </option> 
        <option value = "fi" class ="nationality">Finnish</option> 
        <option value = "fr" class ="nationality">French</option> 
        <option value = "gb" class ="nationality">British </option> 
        <option value = "us" class ="nationality">American </option> 
        <option value = "nl" class ="nationality">Dutch </option> 
        <option value = "nz" class ="nationality">New Zealander </option> 
        <option value = "tr" class ="nationality">Turkey</option> 
        </select> 
       <button type = "submit" class = "pure_button"> Search </button> 
       <input type="reset" value="Reset"> 
      </form> 
      <div class = "rando_facts"> 
       <p id = "intro"> </p> 
       <p id = "name"> </p> 
      </div> 
    </div> 

Und meine JS/jQuery:

$('.pure_button').click(function(e) { 
e.preventDefault() 
    console.log("click noticed") 

$.ajax({ 


    url: "http://api.randomuser.me" + "/?nat=" + $('.nationality').val(), 
    type: "GET", 
    success: function(data) { 

     console.log("This works too") 
     debugger 
     console.log(data) 
     $('#intro').text("Presenting...") 
     var firstName = data.results[0].name.first 
     var lastName = data.results[0].name.last 
     $('#name').text("Name: " + firstName + " " + lastName) 
    } 
}); 

});

Answer 1

JSFIDDLE DEMO - Land und klicken Sie auf Suchtaste, um zu sehen führen

Ihre gewählte Option zu erhalten, verwenden Sie diese. Wenn Sie nur die Klasse und .val() verwenden, erhalten Sie immer die erste Option.

url: "http://api.randomuser.me" + "/?nat=" + $("[name=nationality]").find("option:selected").text(),