連想配列からセレクトボックスを生成する

解決済

質問者：marlmalmal
質問日時：2013/04/17 12:13
回答数：1件

javascriptで連想配列から特定のキーについてセレクトボックスを生成することはできますか？
PHPの例文はあったのですができればjavascriptでやりたいと思っています。

連想配列↓
var profile = [
{
name : 'Aさん',
tall : '150cm',
like : '映画',
},
{
name : 'Bさん',
tall : '160cm',
like : '野球',
},
{
name : 'Cさん',
tall : '170cm',
like : 'テニス',
}
];

があるとして、<body>内に上記のnameだけを抽出したセレクトボックスを作りたいです。
上記の配列の内容はどんどん増えていく予定です。（Dさん、Eさん…というように）

↓めざす完成形
<select id="Namesct">
<option>Aさん</option>
<option>Bさん</option>
<option>Cさん</option>
</select>

どうかご教授いただきたく、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2013/04/17 12:34

idのついたselectは最初から定義されているのでしょうか？

またnameのないselectやvalueのないoptionでよいのでしょうか？

たとえば、こんな感じ
<script>
var profile = [
{"name":'Aさん',"tall":'150cm',"like":'映画'}
,{"name":'Bさん',"tall":'160cm',"like":'野球'}
,{"name":'Cさん',"tall":'170cm',"like":'テニス'}
];

window.onload=function(){
var n=document.getElementById("Namesct");
for(var i=n.options.length -1;i>=0;i--){
n.removeChild(n.options[i]);
}
for(var i=0;i<profile.length;i++){
var opt=document.createElement("option");
opt.appendChild(document.createTextNode(profile[i].name));
opt.setAttribute("value",profile[i].name);
n.appendChild(opt);
}

}
</script>
<form>
<p>
<select name="Namesct" id="Namesct">
<option>Xさん</option>
<option>Yさん</option>
<option>Zさん</option>
</select>
</p>
</form>