标签: jquery-select2

我在页面上有一个Select2元素,通过ajax加载结果.希望能与水豚/ rspec的测试这个(使用捉弄人的鬼司机),但是由于选择二元素实际上开始作为一个隐藏字段,然后填充一个<ul>一旦结果进行处理,没有一个正常的select,fill_in或者choose助手会工作.

我现在拥有的是什么

  it "should have a search field for events" do
    click_link "Select an Event"       # this works as expected
    within('.select2-container') do    # works
      find('.select2-search input').set(event.description[0,5])  # won't work!
      find(:xpath, "li[text()='#{event.description}']").click 
    end
    click_button "Search"
    page.should have_content("Displaying all 2 photos")
  end

上面的第4行,显然capybara可以找到元素,但值不会改变,Select2永远不会进行ajax调用.(不能fill_in在那里使用普通因为搜索字段元素没有label,id或name属性)

我在jquery对话框中使用select2插件但是没有用.下降时,焦点移动到输入控件但立即离开它,不允许我输入任何内容.

这是HTML:

<div id="asignar_servicio" title="Asignar servicios a usuarios">
    <input type="hidden" class="bigdrop" id="a_per_id" />
</div>

这是javascript代码:

        $( "#asignar_servicio" ).dialog({
            autoOpen: false,
            height: 500,
            width: 450,
            modal: true,
            buttons: {
                "Cancelar": function () {
                    $('#asignar_servicio').dialog('close');
                }
            }
        });
        $("#a_per_id").select2({
            placeholder: "Busque un funcionario",
            width: 400,
            minimumInputLength: 4,
            ajax: {
                url: "@Url.Action("Search", "Personal")",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        q: term,
                        page_limit: 10,
                    };
                },
                results: function (data, page) {
                    return { results: data.results };
                }
            }
        }).on("change", function (e) …

我有select2通过css定制其一般类和ID.

现在,我正在尝试自定义将提供给select2的特定类,然后在css中应用它.

我的问题:不是每个说的选择,而是它的下降(带有类select2-drop的div )附加到正文,我该如何访问那个？

我已经尝试过了:

$(".element").select2({
   minimumResultsForSearch: -1,
   containerCssClass : "error"
  }
);

但是这个类error并没有继承到那个div.

更新:这是我正在谈论的图形元素(选项区域):

这是我想要添加特定类的检查中的代码,所以我可以在CSS中使用它:

更新:jsfiddle

<select data-placeholder="Select or type" data-minlength="2" multiple = "multiple" name='arrAval' id='listAval' class="js-basic-multiple form-control" required>

所以这是问题所在:

正如文档所说我应该能够为这个组件设置语言:

$(".js-basic-multiple").select2({
        language: "language-wanted"
    });

无论我设定哪种语言,它都会返回"没有找到结果".为了清楚起见,如在https://select2.github.io/examples.html#matcher中,它为'language:"es"'返回"No se encontraron resultados"

这让我抓狂!为什么不能让Select2在他们的页面上实现清晰的方法或示例如何在Select2上进行简单的CRUD操作:)

我有一个select2从ajax调用获取数据.

<input id="valueg" type="hidden" style="width: 300px;" data-placeholder="Select a Conference" />

$("#valueg").select2({
             data: conferences,
             allowClear: true,
             initSelection: function (element, callback) {
                            var data = { id: element.val(), text: element.val() };
                            callback(data);
                        }
}).on("change", function (e) {
 // show data in separate div when item is selected               
});

有人可以提供一个清晰的方法来从Select2中删除和添加项目.

例如:

我通过ajax调用向db添加一个项目,只想在Select2中附加一个选项并将其设置为选中状态.

我通过ajax删除项目到db,并希望从Select2中删除一个选项,并且没有选择任何选项.

我正在考虑从Chosen转到Select2,因为Select2具有ajax的本机方法.Ajax很关键,因为通常你必须加载大量数据.

我用api.rottentomatoes.com/api/的JSON成功执行了这个例子

我做了一个JSON文件来测试ajax,但它没有用.

我不知道JSON应该如何.似乎没有详细的文件:

https://github.com/ivaynberg/select2/issues/920

我尝试了几种JSON格式,因此我尝试复制类似于api.rottentomatoes的JSON格式,但它不起作用.

我可能会错过一些愚蠢的东西.

function MultiAjaxAutoComplete(element, url) {
    $(element).select2({
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        multiple: true,
        ajax: {
            url: url,
            dataType: 'jsonp',
            data: function(term, page) {

                return {
                    q: term,
                    page_limit: 10,
                    apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey
                };
            },
            results: function(data, page) {
                return {
                    results: data.movies
                };
            }
        },
        formatResult: formatResult,
        formatSelection: formatSelection,
        /*initSelection: function(element, callback) {
            var data = [];
            $(element.val().split(",")).each(function(i) {
                var item = this.split(':');
                data.push({
                    id: item[0],
                    title: item[1]
                });
            }); …

是否有可能在不使用标记的情况下以某种方式将结果分组到Select2组件中<select>,但是<input type="hidden">,结果在配置对象中作为"数据"选项提供？

var select2Options = {
  data: {
    results: myArrayOfResults
  }
};

我可以让这个工作......

var options = [{id: 1, text: 'Adair, Charles'}]  
$('#names').select2({
    data: options,
})

但我无法弄清楚如何从这里开始......

alert(JSON.stringify(request.names))给了我......

[{"id":"1","name":"Adair,James"},
{"id":"2","name":"Anderson,Peter"},
{"id":"3","name":"Armstrong,Ryan"}]

对于Select2将接受为本地数据的东西

我有一个select2下拉列表,我提供了一个匹配器功能.它在初始页面加载时初始化为:

jQuery(document).ready(function() {
    jQuery(".my_select2").select2({
        matcher: function(term, text) {...}
    });
});

这适用于初始页面加载.

现在,我有额外的下拉菜单(select动态创建的元素(通过AJAX拉入,即jQuery(match).load(url).这些额外的下拉菜单不会作为select2小部件进行初始化,这是可以理解的,即使它们与原始的select2选择器匹配).

那么,我怎样才能告诉jQuery将这些动态创建的select元素视为需要初始化的select2项？我可以在匹配元素上设置某种"监视",这样每次匹配元素添加到页面时,select2初始化都会启动吗？

我记得live()前一段时间在jQuery中引入过,如果我正确理解了匹配元素,它们会在创建之前支持它们.我从未使用过该功能,现在看来已弃用.但它确实感觉像我正在寻找的那种东西.

这是一个WordPress插件,目前使用jQuery v1.11.2.

我正在使用Rails 4.2.6开发Ruby On Rails应用程序.我正在使用Turbolinks和jquery.turbolinks(抱歉,我不能发布链接到这些元素,因为我是网站上的新手).我的问题很简单,但我无法解决.这是:我有一个通过AJAX获取的表单

<div class="card-footer">
  <a class="btn btn-sm btn-primary-outline" data-remote="true"  href="/profiles/Mke5kA/positions/new"><i class="fa fa-plus"></i> Nouvelle expérience professionnelle</a>
  <div id="new_position_form"></div>
</div>

表单包含通过AJAX获取数据的Select2元素

= simple_form_for [profile, position], remote: true, html: {id: 'positionForm', class: 'm-b-1'} do |f|
  = f.input :company_id, as: :select, input_html: {:'data-behaviour' => 'company-select2', :'data-kind' => 'company'}
  = f.input :title
  = f.input :summary
  - location = f.object.build_location
  = f.simple_fields_for :location do |l|
    = render 'locations/fields', l: l, city: position.city
  = render "profiles/shared/date_fields", f: f, model: position
  = f.input :skill_list, as: :select, …