已选择多个 select

Question

我正在学习 RoR 并遇到 chosen for rails 的问题，不确定我做错了什么。感谢您的帮助。

尝试了 chosen-rails 和 chosen Jquery 但无法正常工作。

宝石文件：

source 'https://rubygems.org'

ruby '2.4.1'
gem 'rails', '~>5.0.6'
# gem 'mysql2'
gem 'pg'
gem 'responders'
gem 'fast_blank'
gem 'axlsx', git: 'https://github.com/randym/axlsx.git', ref: 'c8ac844' ### to get rid of Ruby 2.4+ deprecation errors
gem 'axlsx_rails' # must come before spreadsheet_architect, see patch in config/initializers/axlsx_rails_spreadsheet_architect_patch.rb
gem 'spreadsheet_architect'
gem 'activerecord-import'

gem 'devise'
gem 'devise_invitable'
gem 'cancancan'
gem 'rolify'
gem "paranoia"
gem 'pretender'
gem 'audited'

# gem 'chosen-rails'

gem "paperclip"
gem "paperclip_utils"
gem 'search_cop'
gem 'sucker_punch'
gem 'rearmed'
gem 'rearmed_rails'
gem 'premailer-rails'

gem 'slim-rails'
gem 'simple_form'
gem 'kaminari'
# gem 'bootswatch'
# gem 'bootstrap'
gem 'jquery-rails'

gem 'cocoon'
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'autoprefixer-rails'
gem 'sass-rails'
gem 'uglifier'
gem 'bootstrap-modal-rails'
gem 'toastr-rails'
gem 'remotipart', github: 'mshibuya/remotipart'
# gem 'rails_admin', '>= 1.0.0.rc'

source "https://rails-assets.org" do
  gem 'rails-assets-autoNumeric','~>1'
  gem 'rails-assets-bootstrap-datepicker'
  gem 'rails-assets-jquery', '~>2'
  gem 'rails-assets-jquery-ujs'
  gem 'rails-assets-autosize', '~>3'
  gem 'rails-assets-select-sync'
  gem 'rails-assets-bootstrap3-typeahead'
  gem 'rails-assets-floatThead'
  gem 'rails-assets-chosen'
  gem 'rails-assets-chosen-bootstrap'
  gem 'rails-assets-chosen-material-theme'
  gem 'rails-assets-bootstrap-directional-buttons'
end

application.js

//
//= require chosen
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.easing/js/jquery.easing.js
//= require bootstrap/dist/js/bootstrap.js
//= require grayscale.js
//= require bootstrap-sprockets
//= require toastr
//= require_tree .

window.initChosen = function(){
  $('.is-chosen').chosen({
    width: "240px",
    search_contains: true,
    placeholder_text_multiple: 'Select...'
  });

  $('.chosen-100').chosen({
    width: "100%",
    search_contains: true,
    placeholder_text_multiple: 'Select...'
  });
};

application.css.scss

*
 *= require chosen-material-theme
 *= require chosen_ie11_patch
 *= require bootstrap-modal
 *= require bootstrap-datepicker
 *= require bootstrap-directional-buttons
 *= require font-awesome
 *= require toastr
 */
 @import "bootstrap-sprockets";
 @import "chosen";
 // @import 'bootstrap';
 @import 'sass/main.scss';
 @import "font-awesome";

role.rb

class Role < ApplicationRecord
has_and_belongs_to_many :users, :join_table => :users_roles


belongs_to :resource,
           :polymorphic => true,
           :optional => true


validates :resource_type,
          :inclusion => { :in => Rolify.resource_types },
          :allow_nil => true

scopify
end

user.rb

class User < ApplicationRecord
  rolify
  belongs_to :resource, polymorphic: true, optional: true

  devise :invitable, :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :database_authenticatable, :confirmable, :invitable

  attr_accessor :invited, :skip_invitation

  def self.strong_params(params)
    params.require(:user).permit(:first_name, :last_name, :email, :password, :password_confirmation, :remember_me, :deleted_at, :invited, :skip_invitation, role_ids: [])
  end

  validates :email, presence: true, uniqueness: {case_sensitive: false}

  validates_confirmation_of :password #normally only required on create

  before_validation :check_registration
  after_create :set_default_role
end

view/admin/users/_form.html.slim

= simple_form_for [:admin, @user] do |f|
  = f.error_notification

  / .row
  /   .col-sm-12
  /     = f.association :person, collection: (@user.new_record? ? Person.available : [@user.person]), autofocus: true, prompt: "Select a person...", input_html: {class: 'is-chosen', disabled: (true unless @user.new_record?)}
  .row
    .col-sm-5
      = f.input :first_name
      / br
      = f.input :last_name
      / br
      = f.input :email
      / br
      = f.association :roles, input_html: {class: 'is-chosen'}
      / = f.association :users,
                  collection: Role.all,
                  include_blank: true,
                  input_html: { class: 'is-chosen' }

      - if @user.new_record?
        br
        = f.input :skip_invitation, as: :boolean, input_html: {value: 'true'}

    .col-sm-5

      - unless @user.new_record?
        .well.well-small style="width:300px"
          = f.input :password, autocomplete: "off", hint: ("Leave it blank if you don't want to change it" unless @user.new_record?)
          br
          = f.input :password_confirmation

  .form-actions.space-below2.space-above2
    button.btn.btn-success type="submit" Save
    = link_to "Cancel", admin_users_path, class: 'btn btn-default space-left2'

我正在尝试 select 用户表单中的多个角色，类似于 https://harvesthq.github.io/chosen/

中所示的示例

相反，我在没有多个 selection 的框中获得了所有角色的列表。

希望我的解释足够了。

Answer 1

您缺少选项 multiple: true 将此设置为您想要多个 select 的位置，例如：input_html: { multiple: true }.

Answer 2

已解决。问题是由于 turbolinks，js 没有重新加载。我不得不使用以下内容： $(文档).on('turbolinks:load',函数(){ 选择...代码 });

已选择多个 select

multiple select with chosen

ruby-on-rails

jquery-chosen