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

Question

前提・実現したいこと

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

該当のソースコード

function check() {
  let select = document.querySelector("#part");

  select.addEventListener('change',() => {
  const valueName = document.getElementById('part').value;
  const XHR = new XMLHttpRequest();
  XHR.open("GET",`/muscle_events/${valueName}`,true);
  XHR.responseType = "json";
  XHR.send();
  XHR.onload = () => {
    const events = XHR.response.events
    debugger
    const eventSelect = document.getElementById('event')
    const value = document.createElement('value')
    value = events
    select.appendChild('value')
  
  }
 })
}
  window.addEventListener("turbolinks:load", check);

class MuscleEventsController < ApplicationController
  def index
    @muscle_events = MuscleEvent.all
  end

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

<script src="select.js"></script>
<p>どこの部位を筋トレしますか？</p>
<%= form_with url:"root_path" do |f| %>
  <%= f.select :part, MuscleEvent.parts.keys.map{|k| [I18n.t("enums.muscleevent.parts.#{k}"), k]} %>
  <%= f.select :event,{} %>
<% 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/ツールのバージョンなど）

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

Answer 1

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

Comments

[goriwo]

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