質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • Ruby

    10231questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    9572questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    8777questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ruby on Rails 4

    2567questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Ajax

    1409questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 5,087

jusco

score 78

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

現在、都道府県(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を使用してプルダウンの変更を読み取る必要があるようなのですが、いろいろ試してみてもうまくいきません。

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

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

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で、都道府県や市区町村の文字データとして保存したいです。


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/13 21:12

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

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

    キャンセル

+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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/13 21:10

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

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

    キャンセル

  • 2015/08/13 21:15

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

    キャンセル

  • 2015/08/15 15:26

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

    キャンセル

check解決した方法

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/13 21:10

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Ruby

    10231questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    9572questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    8777questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ruby on Rails 4

    2567questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Ajax

    1409questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • トップ
  • Rubyに関する質問
  • 【Rails】jQueryとAjaxを用いて、市区町村と都道府県の連動プルダウンメニューを作成したい