
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>
どうかご教授いただきたく、よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【JavaScript】プルダウンで数...
-
javascriptでセレクトボックス...
-
プルダウンで選択したCGIを動か...
-
スマホのフォームでのselect複...
-
コードレビューをお願いします。
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
selectボックスで選択数を制限...
-
javascriptでセレクトボックス...
-
複数のプルダウンを1つにまとめ...
-
return trueとreturn falseの用...
-
Kintone(キントーン)でドロップ...
-
プルダウンで選択すると、DBの...
-
Selectの中身をfor文で入れる
-
文字数を数える際に空白、改行...
-
onchangeイベントを強制的に発...
-
jqueryで、あるタグが削除され...
-
<JavaScript>tableタグを入力不...
-
Dreamweaverで音をボタンで出る...
-
JSで、テーブルのある行のみ、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
selectを変更不可にしたい
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
サイト内の物件を複数の検索条...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
javascriptでセレクトボックス...
-
<select> をmultiple にしてい...
-
selectが変更されたらnameを指...
-
スマホのフォームでのselect複...
-
データベースからのarray を j...
-
select要素のvalueを配列で取得...
-
まったく同じ<select>フォーム...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
セレクトボックスを未選択の状...
-
プルダウンのoptionの表示・非...
-
selectの初期値を設定したい
-
プルダウンの選択内容を次のペ...
おすすめ情報