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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

解決済

1回答

1223閲覧

2つのセレクトボックスをtemplate要素を使用して連動させたいです。

chiketori

総合スコア2

jQuery

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

0グッド

1クリップ

投稿2023/01/31 06:38

編集2023/01/31 16:35

前提、実現したいこと

学習のため本の投稿アプリを作成しています。
投稿を作成する際にエリア(アジア、アフリカ等)、国(日本、エジプト等)の2つのセレクトボックスから地域を選んでもらいます。
エリアと国は親子関係にあります。
こちらの記事を参考にし、エリアのセレクトボックスと国のセレクトボックスをtemplate要素を使って連動させたいです。

発生している問題・エラーメッセージ

template要素の部分にareaのidが渡らず、国のセレクトボックスが使えません。
検証ツールで見たところ、countryの選択部分では、
id="country-of-area#{area.id}"の#{area.id}部分が文字のままで、idの数字になっていませんでした。

該当のソースコード

new.html.erb

<%= form_with model: @book, url: books_path do |f| %> <%= render 'shared/error_messages' , object: f.object %> <div> <%= f.label :area, id: 'hoge' %><br> <%= f.collection_select :area, Area.all, :id, :name, { include_blank: "エリアを選択" } %> </div> <div> <%= f.label :country %><br> <%= f.select :country, [], { include_blank: "国を選択" }, class: "default-country-select" %> </div> <% Area.all.each do |area| %> <template id="country-of-area#{area.id}"> <%= f.collection_select :country, area.countries, :id, :name, { include_blank: "国を選択" } %> </template> <% end %>

area_select.js

import $ from 'jquery' $(document).on('turbo:load', function() { //HTMLが読み込まれた時の処理 let areaVal = $('#book_area').val(); //一度目に検索した内容がセレクトボックスに残っている時用のif文 if (areaVal !== "") { let selectedTemplate = $(`#country-of-area${areaVal}`); $('#book_country').remove(); $('#book_area').after(selectedTemplate.html()); }; //もともとある子要素用のセレクトボックスのHTML let defaultCountrySelect = `<select class="default-country-select" name="book[country]" id="book_country"> <option value>国を選択</option> </select>`; $(document).on('change', '#book_area', function() { let areaVal = $('#book_area').val(); //親要素のセレクトボックスが変更されてvalueに値が入った場合の処理 if (areaVal !== "") { let selectedTemplate = $(`#country-of-area${areaVal}`); //デフォルトで入っていた子要素のセレクトボックスを削除 $('#book_country').remove(); $('#book_area').after(selectedTemplate.html()); }else { //親要素のセレクトボックスが変更されてvalueに値が入っていない場合(include_blankの部分を選択している場合) $('#book_country').remove(); $('#book_area').after(defaultCountrySelect); }; }); });

area.rb

class Area < ApplicationRecord has_many :countries validates :name, presence: true end

country.rb

class Country < ApplicationRecord belongs_to :area has_many :prefectures has_many :books validates :name, presence: true end

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

erbで変数を利用する場合は <%= %> を使う必要がありませんか

rb

1<template id="country-of-area<%= area.id %>">

投稿2023/01/31 07:19

yuma.inaura

総合スコア1451

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chiketori

2023/01/31 07:35

ありがとうございます!意図した通りに動きました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問