JQuery HTML作成

Question

form_with内にあるセレクトボックをjqueryを使って動的に表示させたいです

    <%= form_with url: tweets_path,local: true do |f| %>
      <%= f.collection_select :tournament_id, @category_parent_array,:id,:name,{},{class: 'tournament_select'} %> 
      <%= f.label "学校選択"%>
      <div class="school">
　　　　　以下の部分
　　　　<%= f.collection_select :tournament_id, @category_parent_array,:id,:name,{},{class: 'tournament_select'} %> 
　　　　</div>

jqueryで動的に表示させたいHTMLを作成したのですが、セレクトボックスではなくコードがそのまま表示されてしまいます
以下の書き込みがおかしいのか、それとも別の記述がおかしい可能性があるのでしょうか？

function appendChildrenBox(insertHTML) {
  let childSelectHtml = '';
  childSelectHtml = 
                    `
                    <%= f.collection_select $:tournament_id, @category_children,:id,:name,{},{class: 'tournament_select_child'} %> `
                    $(".school").append(childSelectHtml)
  }

Comments

[kuma_kuma_]

?HTMLのソースですか
始めのソース自体Javaで書かれる書式に見えるんですが...
あと略されていますか？

HTML の基本
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

[yakumo02]

2枚目はjsファイルにHTMLを書き込んでいます
やりたいこととしましては、https://qiita.com/manbolila/items/7c44142de50093470580
にある、item.jsのようなことをしたいです

[kuma_kuma_]

Railsでという事でしたらまずその事を書いてもらわないと...
Railsソース→Railsが変換→HTMLソース→ブラウザがHTMLソースを読み解く
という流れですので掲載されているソースは「Railsのソース」となります。
でRailsの場合さらに
xxx.html.erb
xxx.tsx
の様にファイル名の拡張子も必要な情報となります。
その辺りを追加記載お願いします

Answer 1

jqueryで動的に表示させたいHTMLを作成したのですが、セレクトボックスではなくコードがそのまま表示されてしまいます

JavaScriptの中で<%= f.collection_select ....%>というRailsのフォームヘルパーを呼び出だそうとしていますが、これは実行されません。
理由はJavaScript内でRailsを実行することができないためです。
そのためRailsのフォームヘルパーとしてではなく、文字列として表示されています。

以下の書き込みがおかしいのか、それとも別の記述がおかしい可能性があるのでしょうか？

以下の書き込みがおかしいです。
参考のitem.jsを見ていただくとわかるのですが、フォームヘルパーを利用するのではなく、HTMLのselect文もしくはoptionを利用しています。

この形に沿って実装すると良いかと思います。

Comments

[yakumo02]

ありがとうございました！