次のコードを使用すると、通常のビューで正常に動作します。
.profile-searchbar.text-left
= form_tag(compare_path, method: 'get', remote: true, id: 'compare_form') do
= select_tag "v_friend_id", options_from_collection_for_select(@v_friends,
:id, :full_name, @comparison.v_friend.id),
:include_blank => true, :class => "compare-search"
ただし、モバイルでレンダリングするモバイル ビュー (bootstrap col-xs) では、選択した値は更新されません。オリジナルのままです。通常のビューで変更してから画面を縮小すると、新しい値が表示されますが、モバイル ビューでこの select2 フォームを使用して選択することはできません。デフォルト値のみを選択しているようです。
設計上、元の select2 ドロップダウンを単純に縮小することはできないため、別のドロップダウンを作成したモバイル ビューの select2 オプションを次に示します。
= form_tag(compare_path, method: 'get', remote: true, id: 'compare_form') do
= select_tag "v_friend_id", options_from_collection_for_select(@v_friends,
:id, :full_name, @comparison.v_friend.id),
:class => "compare-searchM", :style => "width:90%; margin-left: 3px;"
select 2のJSは次のとおりです。
$('.compare_btn').on('click', function () {
$("#compare_form").submit();
});
$(".compare-search").select2({
placeholder: "Search to compare",
allowClear: true
});
$(".compare-searchM").select2({
placeholder: "Search to compare",
allowClear: true
});
基本的に、同じ値を制御するには2つのselct2ドロップダウン/フォームが必要なようです..しかし、オリジナルだけがそれを制御していると思います..