県名選択をさせる場合のベストチョイス

JavaScript Rails

県名選択するのにいまどきリストボックスはないし、かといってチェックボックスやラジオボタンならべるのもいまいちだよね、と思っていたところ、ジャストタイミングで素晴らしいスクリプトが公開されたので、早速、こちら(→jsmap - JavaScriptによる都道府県入力補助)を使わせていただきました。

jsmapの使い方

組み込むと、県名選択のフィールドで日本地図のポップアップが表示されます。その中をクリックしてもいいし、カーソルを移動させても県が選択できます。

jsmapのインストール

jsmap - JavaScriptによる都道府県入力補助からファイルをダウンロードして、HTMLに若干変更を加えるだけです。Railsに組み込む場合は次のようにします。

app
  +-- public
      +-- javascripts
          +-- jsmap　←　ここに丸ごと入れます

使いたいところ、例えば、advanced.html.erb に入れたいとしたら、こんな感じです。

<%= javascript_include_tag "jsmap/map.js?locale=ja" -%>
<% form_for :item, :url => { :action => 'advanced' } do |f| %>
  <table class=tbl width=100% >
    <tr>
      <td>地域： <%= f.text_field 'ken', :value => @kenmei, :autocomplete => 'off', :class => 'jsmap' %></td>
      <td><%= submit_tag '保存' -%></td>
    </tr>
  </table>
<% end %>

注意することは、javascript_include_tag で場所を指定することと、text_field に :autocomplete => 'off', :class => 'jsmap' を付けることくらいでしょうか。
本家には「INPUTタグにはname,id属性が同じ内容で指定されている必要があります」という注意書きがありますが、Railsの text_field が生成する「 id="item_ken" name="item[ken]"」で特に問題はありませんでした。

参考

  1. もちろん、こちら(→jsmap - JavaScriptによる都道府県入力補助)。超クールです。