🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

779閲覧

Ajaxでセレクトボックスを作りたい

goriwo

総合スコア17

Ruby

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/03/25 00:15

前提・実現したいこと

筋トレアプリ作成中で以下のようにしたいです
部位ごとに選択したらDBからちがう種目がでるようにしたいです
胸ーベンチ、フライ
背中ーデット、懸垂
脚ースクワット、プレス

該当のソースコード

js

1function check() { 2 let select = document.querySelector("#part"); 3 4 select.addEventListener('change',() => { 5 const valueName = document.getElementById('part').value; 6 const XHR = new XMLHttpRequest(); 7 XHR.open("GET",`/muscle_events/${valueName}`,true); 8 XHR.responseType = "json"; 9 XHR.send(); 10 XHR.onload = () => { 11 const events = XHR.response.events 12 debugger 13 const eventSelect = document.getElementById('event') 14 const value = document.createElement('value') 15 value = events 16 select.appendChild('value') 17 18 } 19 }) 20} 21 window.addEventListener("turbolinks:load", check); 22

MuscleEventsController

1class MuscleEventsController < ApplicationController 2 def index 3 @muscle_events = MuscleEvent.all 4 end 5 6 def get_menu 7 events = MuscleEvent.where(part:params[:id]) 8 render json:{ events: events} 9 end 10end 11

views

1<script src="select.js"></script> 2<p>どこの部位を筋トレしますか?</p> 3<%= form_with url:"root_path" do |f| %> 4 <%= f.select :part, MuscleEvent.parts.keys.map{|k| [I18n.t("enums.muscleevent.parts.#{k}"), k]} %> 5 <%= f.select :event,{} %> 6<% end %>

試したこと

def get_menu events = MuscleEvent.where(part:params[:id]) render json:{ events: events}

ここまでは以下のように取得できているのでjsでのセレクトボックスにeventをいれらてない

pry(#<MuscleEventsController>)> MuscleEvent.where(part:params[:id]) MuscleEvent Load (0.6ms) SELECT `muscle_events`.* FROM `muscle_events` WHERE `muscle_events`.`part` = 2 ↳ app/controllers/muscle_events_controller.rb:8:in `get_menu' => [#<MuscleEvent:0x00007f8c7547ed08 id: 4, part: nil, event: "デットリフト", created_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00, updated_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00>, #<MuscleEvent:0x00007f8c754b4728 id: 5, part: nil, event: "懸垂", created_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00, updated_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00>, #<MuscleEvent:0x00007f8c754b4660 id: 6, part: nil, event: "ラットプルダウン", created_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00, updated_at: Sun, 21 Mar 2021 19:27:21 UTC +00:00>]

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

createElementするのはHTML要素、
その上で受け取ったJSONデータから属性やプロパティを設定してください

投稿2021/03/25 00:30

yambejp

総合スコア116694

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

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

goriwo

2021/03/25 03:12 編集

``` XHR.onload = () => { const events = XHR.response.events debugger const eventSelect = document.getElementById('event') const option = document.createElement('option') } ``` createElementするのはHTML要素でselectまではわかったのですがJSONデータの設定が調べたのですがわかりませんでした 初心者なのですみません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問