リストの値がjavacriptで設定されている

Question

選択リストにjavascriptで得た値を入力するにはどうすればいいですか？

私はJSON形式で私に応答を与える.phpサイトにGETリクエストを送信しています。今私は選択リストに入れた行を入れたいと思う。

<select id = "list" name=log size=50 style=width:1028px> 

<script type="text/javascript"> 
window.onload = function() { 

    var bytes=0; 
    var url = "/test/log.php?q='0'"; 
    function httpGet(url) 
    { 
    var xhttp = new XMLHttpRequest(); 
    var realurl = url + bytes; 
    xhttp.open("GET", url, true); 
    xhttp.onload = function (e) { 
     if (xhttp.readyState === 4) { 
      if (xhttp.status === 200) { 
       console.log(xhttp.responseText); 
       var response=JSON.parse(xhttp.responseText); 
       var log = response.key; 
       bytes = log.length; 
      } 
     }; 
    xhttp.onerror = function (e) { 
     console.error(xhttp.statusText); 
     } 
    }; 


    xhttp.send(); 
    } 

    var updateInterval = 2000; 
    function update() { 

    httpGet(url); 
     setTimeout(update, updateInterval); 
    } 

    update(); 
} 
</script> 
</select> 

私はlog.phpから取得応答が"{"key":"whole log file"}"です。今、私はその応答をリストに保存し、2秒ごとにそれを設定したいと思います。

Answer 1

JSON.parseの後に返される文字列の内容をループします。そこからオプション要素を作成し、選択要素に挿入します。

var html = ""; 
var obj = JSON.parse(xhttp.responseText); 
for(var key in obj) { 
    html += "<option value=" + key + ">" +obj[key] + "</option>"; 
} 
document.getElementById("list").innerHTML = html; 

はJSBin