ruby-on-rails - 如何在rails 4中实现双列表框控件

Question

我想使用 rails 4 在表单中实现一个双列表框，该表单从另一个表中获取列名

我已经用谷歌搜索了一些示例，到目前为止，我已经尝试了下面的示例，但没有成功。我只需要一种简单的方法来实现一个双重列表框，它可以获取列名，尽管这看起来很漂亮 http://geodan.github.io/duallistbox/sample-100.html。

这是 application.js

//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require bootstrap
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require_tree .

我已经从https://github.com/Geodan/DualListBox/下载了 dual-list-box.js 到我的 assets/javacrtipt

这是我的 data_set.coffe

ready = ->
  $('dualListBox').DualListBox();
  return

$(document).ready ready

这是我的 _form.html.erb

<%= form_for(@data_set) do |f| %>
  <% if @data_set.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@data_set.errors.count, "error") %> prohibited this data_set from being saved:</h2>

      <ul>
      <% @data_set.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name ,class:'form-control' %>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
        Select Features
    </div>
    <div class="panel-body">
       <select id="dualListBox">
    </div>
  </div>

  <div class="actions">
    <%= f.submit :class =>"btn btn-default"  %>
  </div>
<% end %>

我的宝石文件

source 'https://rubygems.org'
gem 'rails', '4.2.5.1'
gem 'pg'
gem 'rails_12factor', group: :production

gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc
gem 'tzinfo-data', platforms: [:mingw, :mswin]
gem 'rails_refactor'

gem 'bcrypt', platforms: :ruby
gem 'bootstrap-sass'
gem 'sprockets-rails', '2.3.3'
gem 'devise'
gem 'jquery-datatables-rails', '~> 1.12.2'

编辑：

我的最终结果是这样的：

我在 bootstrap sprockets 和 jquery 之间的兼容性方面遇到问题，所以字体没有加载，我现在决定停止处理这个组件。

Answer 1

$(document).ready ->
  ready()

ready = ->
  $('#dualListBox').DualListBox()

您有一个 id 为“dualListBox”的元素，因此您需要在 jQuery 选择器中使用“#”。