【Rails】jQueryとAjaxを用いて、市区町村と都道府県の連動プルダウンメニューを作成したい

Question

入力フォームでよくある、都道府県を選ぶとそれに対応した市区町村が自動で選択されるという仕組みを実装したいです。

現在、都道府県（Prefecture クラス)と市区町村(City クラス)に初期データを投入し、1対多のリレーションをもたせるところまでは実装しています。

ここから、他の複数のモデルの入力フォームで、選択した都道府県と市区町村をそれらのモデルのカラムに保存するため、以下の様なフォームを作成しました。

    <%= f.label  '会社住所' %>
    <%= f.collection_select :farm_prefectures , Prefecture.all,:name,:name , id: 'prefectureSelect'%>
    <%= f.collection_select :farm_city , City.all,:name,:name,id: 'citySelect' %>

#:farm_prefectures に都道府県を、:farm_city に市区町村を保存する

調べてみると、ここからjQueryやajaxを使用してプルダウンの変更を読み取る必要があるようなのですが、いろいろ試してみてもうまくいきません。

１・#prefectureSelect が変更したことを .changeで読み取る
２・City.prefecture_id と Prefecture.id が一致するものを表示させる

２・の記述方法がわかりません。

jqueryの記述と、ajax実装についてなるべく具体的なコードを教えていただけますでしょうか。
よろしくお願いいたします。

---

追記

ご回答してくださった皆様、ありがとうございます。

こちらのページを参考に、以下の様に実装することで確かに連動ボックス自体の実装は確認できました。

しかし、都道府県と市区町村をそれぞれPostクラスのカラムに保存する方法がわかりません。

#view
<%= form_for @post do |post| %> 
都道府県 <%= post.collection_select :mst_prefecture , MstPrefecture.all,:id,:name %><br />
市区町村 <%= render partial: 'shared/cities',  locals: { prefecture_id: MstPrefecture.first.id }  %>
#shared/cities

<%= collection_select :post , :mst_city, MstCity.where(prefecture_id: prefecture_id),:id,:name  %>

#posts_controller.rb
def cities_select
  if request.xhr?
    render partial: 'shared/cities', locals: { prefecture_id: params[:prefecture_id]}
  end
end

#config/routes.rb
  resources :posts  do
    collection do 
      get :cities_select
    end
  end

#posts.coffee
$(document).on 'change', '#post_mst_prefecture', ->
  $.ajax(
    type: 'GET'
    url: '/posts/cities_select'
    data: {
      prefecture_id: $(this).val()
    }
  ).done (data) ->
    $('#post_mst_city').html(data)

#post.rb
class Post < ActiveRecord::Base
  belongs_to :mst_prefecture
  belongs_to :mst_city
end

# mst_prefecture.rb
class MstPrefecture < ActiveRecord::Base
  has_many :mst_cities
end

# ms_city.rb
class MstCity < ActiveRecord::Base
  belongs_to :mst_prefecture
end

上記の実装だと、確かに都道府県に合わせた市区町村が表示されるようにはなったのですが、それぞれのvalueを、Post.prefecture, Post.city に格納しようと collection_select を弄ると動作しなくなってしまうのです。

また、上記記述ではvalueがidとなってしまっており、データを格納する際にそのデータが数値になってしまいます。
出来れば保存するデータはidではなくnameで、都道府県や市区町村の文字データとして保存したいです。

どのように記述すればよろしいでしょうか。

Answer 1

Railsで連動プルダウンというサイトでそのものずばりな実装が公開されていました。

「rails 都道府県 プルダウン」で検索しました。

Comments

[jusco]

ご回答ありがとうございます！

上記ページは参考にし、同様の手段でプルダウンメニューの連動自体は実装できたのですが、これらのvalueを別のカラムに保存する方法がわからないのです・・・

Answer 2

$(function () {
	var parent = $(".ajax-pref");
	var child = $(".ajax-city");
	parent.on("change", function () {
		var selectedPrefCode = $(this).val();
		var param = {
			pref: selectedPrefCode
		};
		child.html('<option value="-1">-- 市区郡選択 --</option>');
		var defaultCityCode = ("" != child.attr("default")) ? child.attr("default") : -1;

		if (-1 != selectedPrefCode) {
			$.getJSON("/ajax/getcity.php", param, function (json) {
				$.each(json, function (i) {
					child.append(
							'<option value="' + json[i].code + '">' +
							json[i].name + '</option>');
				});
				child.val(defaultCityCode);
			});
		}
	}).change();
});

<select name="pref" class="ajax-pref">
<option value="-1">都道府県</option>
<option value="1">北海道</option>
<option value="2">青森</option>
…
<option value="47">沖縄県</option>
</select>

<select name="city" class="ajax-city">
<option value="-1">市区郡</option>
</select>

利用データはこれ郵便番号データダウンロード

###テーブル定義

CREATE TABLE `mst_address` (
  `officialCode` char(11) NOT NULL DEFAULT '' COMMENT '全国地方公共団体コード(JIS X0401、X0402)',
  `postalCode5` char(5) NOT NULL DEFAULT '' COMMENT '(旧)郵便番号(5桁)',
  `postalCode7` char(7) NOT NULL DEFAULT '' COMMENT '郵便番号(7桁)',
  `kana_pref` varchar(20) NOT NULL COMMENT '都道府県名（カタカナ）',
  `kana_city` varchar(40) NOT NULL COMMENT '市区町村名（カタカナ）',
  `kana_town` varchar(40) NOT NULL COMMENT '町域名（カタカナ）',
  `pref` varchar(20) NOT NULL COMMENT '都道府県名',
  `city` varchar(40) NOT NULL COMMENT '市区町村名',
  `town` varchar(40) NOT NULL COMMENT '町域名',
  `flag_doubleCode` tinyint(1) NOT NULL COMMENT '一町域が二以上の郵便番号で表される場合の表示　(注3)　(「1」は該当、「0」は該当せず)',
  `flag_banchi` tinyint(1) NOT NULL COMMENT '小字毎に番地が起番されている町域の表示　(注4)　(「1」は該当、「0」は該当せず)',
  `flag_chome` tinyint(1) NOT NULL COMMENT '丁目を有する町域の場合の表示　(「1」は該当、「0」は該当せず)',
  `flag_double_area` tinyint(1) NOT NULL COMMENT '一つの郵便番号で二以上の町域を表す場合の表示　(注5)　(「1」は該当、「0」は該当せず)',
  `flag_update` int(1) NOT NULL COMMENT '更新の表示（注6）（「0」は変更なし、「1」は変更あり、「2」廃止（廃止データのみ使用））',
  `flag_update_reason` int(1) NOT NULL COMMENT '変更理由　(「0」は変更なし、「1」市政・区政・町政・分区・政令指定都市施行、「2」住居表示の実施、「3」区画整理、「4」郵便区調整等、「5」訂正、「6」廃止(廃止データのみ使用))',
  KEY `postalCode7` (`postalCode7`),
  KEY `postalCode5` (`postalCode5`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE `mst_address_mini` (
  `officialCode` int(5) unsigned zerofill NOT NULL COMMENT '全国地方公共団体コード(JIS X0401、X0402)',
  `pref` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '都道府県名',
  `city` varchar(40) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '市区町村名',
  PRIMARY KEY (`officialCode`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

###マスターデータ更新用スクリプト

#!/bin/bash

DBUSER=
DBPASS=
DBNAME=

echo "Downloading..."
wget -q http://www.post.japanpost.jp/zipcode/dl/kogaki/zip/ken_all.zip

echo 'Melting...'
unzip -o -q ken_all.zip

echo "Convert SJIS to UTF8"
nkf -w KEN_ALL.CSV > mst_address.csv

echo 'Importing to MySQL'
mysqlimport -s -u ${DBUSER} -p${DBPASS} --local --delete --fields-terminated-by=, --fields-enclosed-by="\"" --fields-escaped-by="\\" --lines-terminated-by="\r\n" ${DBNAME} mst_address.csv;
mysql -u ${DBUSER} -p${DBPASS} ${DBNAME} -e "TRUNCATE mst_address_mini;INSERT INTO mst_address_mini SELECT officialCode, pref, city FROM mst_address GROUP BY officialCode"

# CSV削除
rm -f KEN_ALL.CSV
rm -f mst_address.csv
rm -f ken_all.zip

Comments

[jusco]

ご回答ありがとうございます！

言語はPHPでしょうか…？
見慣れないフォーマットのため、参考にできそうにありません・・・
せっかく回答していただいたのに申し訳ありませんm(__)m

[退会済みユーザー]

PHPなんて回答に１行もありませんよ。

[jusco]

SQLが見慣れておらず、勉強不足で申し訳ありません…m(__)m

Answer 3

追記の記述に加え、
MstCityの:prefecture_idを対応する都道府県名に変更することで対応出来ました！

ご回答いただいた皆様、ありがとうございましたm(__)m

Answer 4

質問内容と回答内容に認識齟齬がありましたので、削除します。
失礼しました。

Comments

[jusco]

ご回答ありがとうございますm(__)m