WebデザインノートBOOK

Webクリエイターに関する勉強を書き記したブログになります。

select optionに自動で都道府県を追加

<select name...>
  <option value="北海道">北海道</option>
  <option value="青森">青森</option>
  :
  :
</select>

これを楽して作成&HTMLソースをキレイに書きたい人向けに作りました。

html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/autoPrefecturesAdd.js"></script>
  :
  :
</head>
<body>

  :
  :

<select name="prefectures" class="prefectures"></select>

jQueryと本題のjsを読み込み、selectタグにclass指定するだけ。
クラス名は「prefectures」。

javascript
/*
 * autoPrefecturesAdd()
 * http://d.hatena.ne.jp/bondx2/
 *
 * @version
 * 1.0.0 (March 23 2012)
 *
 * @copyright
 * Copyright (C) 2012 http://d.hatena.ne.jp/bondx2/
 */

$(function(){
  var prefectures = new Array("北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県");
	
  for(var i=0; i < prefectures.length; i++){
    $("select.prefectures").append('<option value="'+ prefectures[i] + '">' + prefectures[i] + '</option>');
  }
});


……半分あそびで(笑)

フォーム送信のsubmitボタンをimgタグに【めも】

http://q.hatena.ne.jp/1202536562