複製したセレクトボックスから、一つのデータしか保存されない。

Question

前提・実現したいこと

Railsでユーザーのプロフィール編集画面を作っています。
ユーザーが「勉強中の言語」を選択出来るよう、セレクトボックスを設置しました。
またユーザーは複数の言語を勉強中の可能性もある為、jQueryを用いセレクトボックス横に「＋」ボタンを設置し、セレクトボックスを非同期で複製出来るようにしました。

モデルではhas_many等の記述もしているのですが、ユーザーが最後に選んだ言語しか保存されません。
（日本語のみを選択した場合は日本語が保存。ユーザーがセレクトボックスを複製し、日本語、英語、中国語の順で選択した場合は中国語のみが保存されると言った具合です。）

エラーは特に表示されません。ユーザーが選んだ全ての言語を保存、表示できるようにさせたいです。

views/users/edit.html.erb

  <%= form_tag("/users/#{@user.id}/update", {multipart: true}) do %>
  <ul>
    <li>
      <div class="col-1">Spoken language:</div>
      <div class="col-2" id="input_pluralBox">
        <div id="input_plural">
          <select name="language" class="form-control"><%= options_for_select(languages) %>
          <input type="button" value="＋" class="add pluralBtn">
          <input type="button" value="－" class="del pluralBtn">
        </div>
      </div>       
    </li>
    <li>
      <div class="save"><input id="button" type="submit" value="Save" onclick="myfunk()"></div>
    </li>
  </ul>
  <% end %>

options_for_select(languages)の部分ですが、言語一覧を表示してくれる「language-select」と言うgemを使用しています。

セレクトボックスを複製する「＋」ボタンに関する記述。

$(document).on("click", ".add", function() {
    $(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
    var target = $(this).parent();
    if (target.parent().children().length > 1) {
        target.remove();
    }
});

models/user.rb

class User < ApplicationRecord
  has_many :languages, inverse_of: :user
end

models/language.rb

class Language < ApplicationRecord
  belongs_to :user
end

追記

試しにviews/users/edit.html.erbの中の一文を以下の様に変えた所、["JA", "EN", "ZH"]と保存した全ての言語を表示させる事が出来ました。どうやら配列、ハッシュ関連の記述をいじる事で解決出来るのかもしれません。

<select name="language" class="form-control"><%= options_for_select(languages) %>
↓
<select name="language[]" class="form-control"><%= options_for_select(languages) %>

しかしこれでは以下の点がまだ不完全ですので、引き続き試行錯誤しております。お分かりになる方がいらっしゃればご助言頂けると有難いです。

1. valueの値がそのまま出力されている点（JA→Japaneseの様に表示したい）。
2. ["hoge", "fuga"]など配列の形のまま出力されている点（シンプルに「Japanese English」の様に表示したい）。

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

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3

Answer 1

nameがおなじだからじゃないですか？
SelectBoxである必要はありますか？ユーザビリティの点から言っても大人しくチェックボックスの方がいいと思います。select boxは悪手に感じます

Comments

[punchan36]

ご回答ありがとうございます。
世界中の言語（おそらく100近く）を選択出来るようにしたいためセレクトボックスを選びました。
実際にその機能を実装しているページがありましたので、工夫すれば可能なのではと思い質問致しました。

そちらは会員制サイトのプロフィール編集ページですのでシェアが出来ませんが、デベロッパーツールを見た所では複製されたセレクトボックスにも同じnameが使用されていました。恐らく使用されている言語はphpで、<select name="langs[]">とありました…。

[okina]

nameが同じだと、一番最後のやつに上書きされるのでそのような挙動になります。

参考サイトのように、配列として受け取るのが賢いかと思います。参考になりました。

lang[n].value
としてやれば、n+1個目の値を取得できます

[punchan36]

有難うございます。
先ほど追記にも記載しましたが、参考サイトの様に配列で記述した所、うまく複数の言語を取得する事が出来ました。ただ出力の表記に関して問題があり、再度試行錯誤しております。
何とか希望通りに上手く出力する方法はありませんでしょうか。

[okina]

その点に関してはvalueを変える方が賢いと思いますがダメですか？
後半の部分も、配列のまま取得してから、配列からそれぞれの中身を取り出す方がいいと思います。

なんかご期待に添えるお答えじゃなく申し訳ないのですがご検討ください。後々後悔はしないと思いますが、、、

[okina]

めちゃくちゃ今更ですけど、よかったらselect multipleとかもご検討ください

[punchan36]

有難うございます。
JA、ENなどのvalueを消すと、今度はテキストの形で["Japanese", "English"]と配列の形で表示されました。配列から中身を取り出す方法ですが、

<div class="language"><%= @user.language.first(4) %></div>（先頭から4つ要素を取り出す）

例えばこの様にすると、
["Ja
のみが表示されました…。カッコや""も含め、先頭から4文字だけが取得されているようです。。
中々解決出来ずにすみません。

[punchan36]

select multipleなども便利かと思いますが、ゆくゆくはユーザーが選んだ各言語の習熟度（初級・中級・上級）などもセットで選べるようにしたいため、やはりセレクトボックスで各要素を取得出来れば一番理想的かなと考えております。
重ね重ね有難うございます。

[okina]

user.languageが配列のように見えて配列じゃないみたいですね、、、型を確認してみてください。
確実に配列に格納し直した上でもう一回試してみてください。すいません曖昧な回答で

[punchan36]

有難うございます。まだ解決はしておりませんが、質問してからの時間も長引いておりますのでベストアンサーを決めさせて頂きます。解決しましたら追々追記致します！

[punchan36]

その後解決致しました。解決までの過程はQiitaにまとめました。https://qiita.com/punchan36/items/717a5553e56220aee0e0
okinaさま、以前はお時間を割いて頂き有難うございました！