現在railsでアプリを作成しています。
1行のプルダウンでは情報が見づらいためプルダウンで表示させる行数を増やしたいと考えました。
調べていると
Rails の f.collection_select で複数カラムを結合した文字列で表示する
htmlのセレクトのオプションで改行(jQuery-ui widget)
GitHub | ainterpreting/jquery-multilineSelectmenu
の内容を見つけました。
gemjquery-ui-rails
を利用して実装しようとしましたがうまくいきません(m_ m)
わかる方がいらっしゃれば教えていただきますようよろしくお願いいたします(m _m)
###エラー内容
consoleにて下記のエラーが出ているためプルダウンの表示が複数行にならない
(それだけではないかもしれません)
Uncaught TypeError: Cannot read property 'selectmenu' of undefined var multilineSelectmenu = $.widget("ui.multilineSelectmenu", $.ui.selectmenu, { ↑↑↑↑ここ
###試したこと
- vendor/assets/stylesheetsに ここ
からダウンロードしてきたjquery.multilineSelectmenu.css
を配置
- vendor/assets/javascriptsに ここ からダウンロードしてきた
jquery.multilineSelectmenu.js
を配置
###期待する動作
- consoleで上記のエラーが表示されない
- プルダウンを複数行で表示できるようにしたい
###動作環境
Ruby:2.3.5
Ruby on Rails: 4.2.5
###参考サイト
Rails の f.collection_select で複数カラムを結合した文字列で表示する
htmlのセレクトのオプションで改行(jQuery-ui widget)
GitHub | ainterpreting/jquery-multilineSelectmenu
###現在のソースコード
ruby
1#app/models/payment.html.erb 2class Payment < ActiveRecord::Base 3 #validation 4 validates :type, presence: true 5 validates :year, presence: true 6 validates :month, presence: true 7 validates :four_digit, presence: true, length: { is: 4 } 8 9 # カラムを結合させる 10 def combine_paymentInfo 11 "カード種別:" + self.type + "|" + "有効期限:" + self.year + " / " + self.month + "|" + "下4桁" + self.four_digit 12 end 13end
app/views/payments/show.html.erb
ruby
1<%= collection_select :id, @payments, :id, :combine_paymentInfo ,{}, {class: 'form-control selectbox'} %>
app/assets/javascript/application.js
ruby
1//= require jquery 2//= require jquery.multilineSelectmenu 3//= require jquery_ujs 4//= require jquery-ui 5//= require jquery-ui/widget 6//= require jquery-ui/widgets/selectable 7//= require jquery.turbolinks 8//= require turbolinks
app/assets/javascript/payments.js
js
1$(".selectbox").multilineSelectmenu();
app/assets/stylesheets/payments.scss
ruby
1@import "jquery-ui"; 2@import "jquery.multilineSelectmenu"; 3. 4.
あなたの回答
tips
プレビュー