rails4中如何实现双列表框控件

Question

我想在使用 rails 4 从另一个 table

获取列名称的表单中实现双列表框

我在谷歌上搜索了一些例子，到目前为止我已经尝试了下面的例子但没有成功。我只需要一种简单的方法来实现一个双列表框，它获取列名它不一定是这个，虽然这看起来很漂亮 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/

下载了双列表-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 %>

我的gem文件

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 选择器中使用“#”。

rails4中如何实现双列表框控件

How to implement a dual list box control in rails 4

ruby-on-rails

ruby

ruby-on-rails-4

listbox

ruby-2.3