jquery

jQueryでselectへoptionを動的に追加する

配列データをselectへ入れる

jQueryで直接selectへHTMLタグを直接入れても動作はするのですが、
外部からデータをロードした場合を想定して利用できるようにしました。

データの部分がjsonなどで取得できるような仕組みに変更すれば、
動的なselectが実装できるような気がします。

<select id="js_pref_slct"></select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var pref_list = [
  "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県",
];

$(function() {
  var count, d, plist;
  // データが存在する間forで繰り返す
  for (count = 0; count < pref_list.length; count++)
  {
    plist = $('<option>').html(pref_list[count]).val(pref_list[count]);
    $("#js_pref_slct").append(plist);
  }
});
</script>


コメントを残す