ボタンをクリックすると値を全て1にしたい

Javascriptでボタンをクリックするとコードのstate_1からstate_5の選択ボックスが全て1に切り替わるようにしたいです。
railsをjavascriptで操作する方法がわかりません。

選択する数字はステイタのステーブルが別にあり、ステイタステーブルのidで拾っています。そのステイタステーブルにはステイタス名の他に並び順や有効/無効のカラムがあり、それを通して本テーブルに表示させてるので、それらがちゃんと適用されてステイタス名が正しく表示されるようにしたいです。
５行あるので、５行全てが１というidを拾って表示させたいです。

f.collection_selectを使っていますので、これらが操作できる方法が知りたいです。
またレイアウトが崩れないようにしたいです。

view
1<div class="form-group">
2    <div class="col-xs-2" align="right"><%= f.label :item_1, :class => 'control-label' %></div>
3    <div class="controls">
4      <div class="col-xs-4"><%=  f.collection_select :item_1, Product.where(mukou: false).order(:sub_num), :id, :items , {:selected => 1} ,{:class => "form-control"} %></div>
5    </div>
6    <div class="col-xs-2" align="right"><%= f.label :state_1, :class => 'control-label' %></div>
7    <div class="controls">
8      <div class="col-xs-4"><%=  f.collection_select :state_1, State.where(mukou: false).order(:sub_num), :id, :status , {:prompt => true} ,{:class => "form-control"} %></div>
9    </div>
10  </div>
11  <div class="form-group">
12    <div class="col-xs-2" align="right"><%= f.label :item_2, :class => 'control-label' %></div>
13    <div class="controls">
14      <div class="col-xs-4"><%=  f.collection_select :item_2, Product.where(mukou: false).order(:sub_num), :id, :items , {:selected => 2} ,{:class => "form-control"} %></div>
15    </div>
16    <div class="col-xs-2" align="right"><%= f.label :state_2, :class => 'control-label' %></div>
17    <div class="controls">
18      <div class="col-xs-4"><%=  f.collection_select :state_2, State.where(mukou: false).order(:sub_num), :id, :status , {:prompt => true} ,{:class => "form-control"} %></div>
19    </div>
20    </div>
21  <div class="form-group">
22    <div class="col-xs-2" align="right"><%= f.label :item_3, :class => 'control-label' %></div>
23    <div class="controls">
24      <div class="col-xs-4"><%=  f.collection_select :item_3, Product.where(mukou: false).order(:sub_num), :id, :items , {:selected => 3} ,{:class => "form-control"} %></div>
25    </div>
26    <div class="col-xs-2" align="right"><%= f.label :state_3, :class => 'control-label' %></div>
27    <div class="controls">
28      <div class="col-xs-4"><%=  f.collection_select :state_3, State.where(mukou: false).order(:sub_num), :id, :status , {:prompt => true} ,{:class => "form-control"} %></div>
29    </div>
30  </div>
31  <div class="form-group">
32    <div class="col-xs-2" align="right"><%= f.label :item_4, :class => 'control-label' %></div>
33    <div class="controls">
34      <div class="col-xs-4"><%=  f.collection_select :item_4, Product.where(mukou: false).order(:sub_num), :id, :items , {:selected => 4} ,{:class => "form-control"} %></div>
35    </div>
36    <div class="col-xs-2" align="right"><%= f.label :state_4, :class => 'control-label' %></div>
37    <div class="controls">
38      <div class="col-xs-4"><%=  f.collection_select :state_4, State.where(mukou: false).order(:sub_num), :id, :status , {:prompt => true} ,{:class => "form-control"} %></div>
39    </div>
40  </div>
41  <div class="form-group">
42    <div class="col-xs-2" align="right"><%= f.label :item_5, :class => 'control-label' %></div>
43    <div class="controls">
44      <div class="col-xs-4"><%=  f.collection_select :item_5, Product.where(mukou: false).order(:sub_num), :id, :items , {:selected => 5} ,{:class => "form-control"} %></div>
45    </div>
46    <div class="col-xs-2" align="right"><%= f.label :state_5, :class => 'control-label' %></div>
47    <div class="controls">
48      <div class="col-xs-4"><%=  f.collection_select :state_5, State.where(mukou: false).order(:sub_num), :id, :status , {:prompt => true} ,{:class => "form-control"} %></div>
49    </div>
50    </div>

退会済みユーザー

2020/03/25 13:15

タイトル：なる内容：したいどっち?

makox0105

2020/03/25 14:34

直しました。

行動規範の内容に同意します

回答1件

Ruby自体に明るいわけではないですが、要件だけ見ると

railsをjavascriptで操作する方法がわかりません。

HTML上にある要素の操作だけならJavaScriptだけで完結できるのではないでしょうか。
jQuery でセレクトボックスを操作！value 値の取得や選択項目の指定、プルダウンテキストの取得方法

投稿2020/03/25 11:31

m.ts10806

総合スコア80875

makox0105

2020/03/25 11:37

HTML上で成立すれば良いのですが、railsでゴリゴリに組んでしまったので他に良い方法があれば良いのですが…

m.ts10806

2020/03/25 11:41 編集

他にセレクトボックスあったら使えないですけど、jQueryでちゃっと書くなら JavaScriptのクリックイベント内に下記だけでできそうに思います。 $("select").val("1"); 正確に対応するなら「出力されたHTMLに対して設定」ですけどね。

makox0105

2020/03/25 12:19

その場合1に対するレコードは表示できるのでしょうか？別テーブルから引っ張ってきてます。

m.ts10806

2020/03/25 12:30

質問本文も含めて今初めて出てきた「レコード」が何のことを言っているのか私には分かりません。

makox0105

2020/03/25 12:49

説明足らずですみません。選択する数字はステイタのステーブルが別にあり、ステイタステーブルのidで拾っています。そのステイタステーブルにはステイタス名の他に並び順や有効/無効のカラムがあり、それを通して本テーブルに表示させてるので、それらがちゃんと適用されてステイタス名が正しく表示されるようにしたいです。５行あるので、５行全てが１というidを拾って表示させたいです。

m.ts10806

2020/03/25 12:51

Ajaxですかね。データ更新側は。いずれにしても画面側はJavaScriptで操作しないといけないと思いますけど。

makox0105

2020/03/25 12:53

そうですね、Ajaxを使えばできると思います。ただ理解はそれだけです。

m.ts10806

2020/03/25 13:02

RailsでAjax　　teratailでもよく見ますし、手法としては結構出尽くしてるのでは？リクエストを送って処理をレスポンスとして返す form送信と概念は同じです。サーバーサイドの処理にブラウザ出力がないだけで。

makox0105

2020/03/25 14:32

ありがとうございます。もう少し調べてみます。