<option>タグにクラスを付与しますか？ APIコールが機能していません

Question

私はAJAXとJavaScript/jQueryを使用してAPIコールを練習しています。私は現在、ランダムユーザーAPI（https://randomuser.me/）を使用しています。何らかの理由でAJAX呼び出しが正しく実行されない場合があります。私は "国籍"のタグのクラスを与えているので、それがあるかどうか疑問に思っていますか？最初は、このクラスのタグを付けましたが、それは正しくないと思いました。ここでどこが間違っていますか？私が電話しようとするすべてのユーザーは、その国籍がちょうどリストの先頭にあるため、オーストラリア人です。誰も私にAPIを正しく呼び出す方法についていくつかのヒントを教えてもらえますか？

は、ここに私の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> 

そして、私の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 - 変更の国と

はあなたの選択したオプションを取得するには結果を参照して検索ボタンをクリックして、これを使用しています。クラスと.val()だけを使用している場合は、常に最初のオプションが表示されます。

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