FORループから作成されたSELECTリストからOPTIONを選択

Question

私は就職活動のために構築する必要のあるプログラムをもっと必要とします。 < プロジェクト全体については、ユーザーがapiで提供されている犬の品種を選択できるようにする必要があります。そのドロップダウン/オプションでメニューを選択します。問題は、私はどのオプション/品種を指定する方法を見つけることができないようです。オプションをクリックすると、リストの最後のオプションが表示されます。私はおそらくahhhhhhhここに非常にシンプルな何かが欠けています：

var showcase = document.getElementById('showcase'); 

var select = document.getElementById('select-bar'); 

var request = new XMLHttpRequest(); 

// Get data from API endpoint 
request.open('GET', 'https://dog.ceo/api/breeds/list', true); 

request.onload = function() { 
var data = JSON.parse(this.response); 
var breeds = data.message; 

if (request.status >= 200 && request.status < 400) { 
for (var i = 0; i < breeds.length; i++) { 

    var opt = document.createElement('option'); 
    opt.innerHTML = breeds[i]; 
    opt.value = breeds[i]; 
    select.appendChild(opt); 

} 
select.addEventListener("change", function(event) { 
    console.log(opt); }) 
} 
} 

request.send(); 

私はAPIを使用したなどのnoobだとループ/配列ああでの作業します。ヘルプ:(

Answer 1

、あなたはいくつかの方法でこれを解決することがありevent.target.value

var showcase = document.getElementById('showcase'); 
 
var select = document.getElementById('select-bar'); 
 
var request = new XMLHttpRequest(); 
 

 
// Get data from API endpoint 
 
request.open('GET', 'https://dog.ceo/api/breeds/list', true); 
 

 
request.onload = function() { 
 
    var data = JSON.parse(this.response); 
 
    var breeds = data.message; 
 

 
    if (request.status >= 200 && request.status < 400) { 
 
    for (var i = 0; i < breeds.length; i++) { 
 

 
     var opt = document.createElement('option'); 
 
     opt.innerHTML = breeds[i]; 
 
     opt.value = breeds[i]; 
 
     select.appendChild(opt); 
 

 
    } 
 
    } 
 
} 
 
request.send(); 
 

 
select.addEventListener("change", function(event) { 
 
    console.log(event.target.value); 
 
})

<select id="select-bar"></select>

Answer 2

を使用し、選択した要素を取得するためにif loop.Also外の要素を選択するaddEventListenerを追加最も単純なのは、関数を呼び出す各エントリにonClickイベントを追加し、そのパラメータとしてbreed-IDをパラメータとして渡すことです。

代わりにAngularJS（これは私が使用しているもの）のようなフレームワークを使うことでしょう。これは、しかし、あなたはいくつかの学習を通過する必要があります。