Question

我是一个Rails初学者，并尝试在Rails应用程序中使用Select2 gem，我发现它没有按预期工作。它显示为正常下拉，只有我期待其中包含搜索选项。有人可以帮助我。

HTML代码

<tbody id="template">
            <tr>
                <td>
                    <%= 
                      select_tag "order[order_placed][][itemname]", 
                      options_from_collection_for_select(Stock.all, "item_name", "item_name"), {:class => 'form-control', :id => 'select_two', :style => "width: 180px"}
                    %>


                </td>
                <td><input name="order[order_placed][][quantity]" type="text"  size='10' class="form-control" /></td>
                <td><input name="order[order_placed][][unitprice]" type="text"  size='10' class="form-control" /></td>
                <td><input name="order[order_placed][][tax]" type="text"  size='10' class="form-control"/></td>
                <td><input name="order[order_placed][][discount]" type="text"  size='10' class="form-control"/></td>
                <td><input name="order[order_placed][][itemtotalprice]" type="text" size='10' class="form-control" /></td>
                <td>
                    <button type="button" class="btn btn-default btn-sm sub" onClick="$(this).closest('tr').remove();">
                        <span class="glyphicon glyphicon-minus"></span>
                    </button>
                </td>
            </tr>
        </tbody>

这是我的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require jquery
//= require toastr
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree  .

$(document).ready(function)(){
            $('#select_two').select2();
}

Gem文件有相关的宝石

gem 'select2-rails'

Answer 1

在您的application.js

中添加//= require select2

//= require rails-ujs
//= require jquery
//= require toastr
//= require bootstrap-sprockets
//= require select2
//= require turbolinks
//= require_tree

还要在你的application.css中添加

*= require select2

你的select_tag也应该有name和id列，如： -

                <%= 
                  select_tag "order[order_placed][][itemname]", 
                  options_from_collection_for_select(Stock.all, item_name, id), {:class => 'form-control', :id => 'select_two', :style => "width: 180px"}
                %>

了解更多details

Answer 2

我不知道这是什么解决方案，但我已按照这些步骤在我的应用程序上手动完成了这个步骤

在Gemfile

gem "select2-rails"
# bundle install

的application.js

//= require select2

在//= require_tree .行

之上

的application.js

(function($){
   "use strict";
    $(document).on('ready', function(){
        $("#order_place_id").select2({
            allowClear: true,
            theme: "bootstrap"
        });
    });
}(jQuery));

application.css

*= require select2
*= require select2-bootstrap

HTML代码

<div class="form-group">
    <label>Place Order</label>
    <select name="order[order_placed][][itemname]" id="order_place_id" class="form-control">
        <% Stock.all.each do |stock| %>
            <option value="<%= stock.item_name %>">
                <%= stock.item_name %>
            </option>
        <% end %>
    </select>
</div>

最后，请看下面我实施的图像

如果您尝试此解决方案，请确保在完成步骤后重新启动服务器。

希望能提供帮助

Rails5：Select2 Gem无效

2 个答案: