我正在使用Twitter bootstrap和梦幻般的Select2插件.

这些工作很棒,我意识到你需要{width: 'resolve'}在启动Select2时设置,否则它看起来搞砸了!

但是我的一个选择存在问题,如下图所示,Referee Type选择的宽度不正确.

这是由于此字段最初是隐藏的,只有在" 组"字段中选择" 裁判"时才会显示.

那么,我该如何解决这个问题呢？

我正在转换<input type="hidden">为select2下拉列表并通过查询方法提供数据

$('#inputhidden').select2({
    query: function( query ) {
        query.callback( data ); // the data is in the format select2 expects and all works well..
    );
});

问题是我需要破解select2用户界面并在搜索栏顶部放置两个按钮,当点击它们时,将执行ajax调用,并且必须更新select2内容.

现在,我需要完成这些更新,而不是完全重建select2,而只是刷新下拉列表中的项目.我找不到将一组新数据传递给已创建的select2控件的方法,这可能吗？

我正在使用带有twitter bootstrap的select2 jquery插件.它适用于较少数量的物品.但是当列表很大(超过1500项)时,它确实会变慢.它在IE中速度最慢.

正常下拉列表工作速度非常快,超过1500项.这种情况有没有解决方法？

Select2加载我列表中的所有项目成功,这是我在页面加载时尝试选择特定值时发现的问题.例:

::将select2放在特定的html元素中,即使加载了所有项目,也不会选择任何值.

$('#my_id').select2();

::当页面加载时我试图显示所选的特定项目,但是没有按预期工作,因为即使选中,select2也不会显示它.

$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.

如何在页面加载时弹出选定的选项？

提前致谢.

更新

::我如何加载所有select2项目(对不起,它的玉,而不是纯HTML):

label(for='category') Category
    span.required *
select(id='category', style='width:230px', name='category')
    option(value='') - Select -
    each cat in categories
        option(value='#{cat.id}') #{cat.description}

PS:我的列表中的所有项目都已加载.

::我如何初始化select2:

只需将以下行代码放在我的javascript上即可成功:

$('#category').select2();

::我如何选择特定值:

• 第一次尝试:

  $('#category').select2(
      {
          initSelection: function(element, callback) {
              callback($('#field-category').val());
          }
      }
  );
  

  Run Code Online (Sandbox Code Playgroud)

• 第二次尝试:

  $('#category').val($('#field-category').val());
  

  Run Code Online (Sandbox Code Playgroud)

PS:#field-category有一个隐藏输入字段的值,工作正常.

多谢你们!

我正在尝试克隆包含select2工具的行,当我使用jQuery克隆该行时,克隆的select2没有响应.在下面给出的图像中,首先是原始的select2正常工作但第二和第三个select2克隆没有响应

代码段:

$(document).ready(function() {
  var clonedRow = $('.parentRow').clone().html();
  var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>';
  $('#addRow').click(function() {
    $('#test').after(appendRow);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="parentRow" id="test">
  <td>
    <g:message code="educationDetails.educationLevel.label" default="Education Level" />
  </td>
  <td>
    <div style="float: left;">
      <g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" />
    </div>
    <div>
      <a href="javascript:void(0)" id="addRow">
        <img alt="" title="Add Additional Education Level" src="/static/images
                                                                /top_submit_1.gif">
      </a>
    </div>
  </td>
</tr>

我有使用Ajax设置的select2控件(包括单个和多个).我试图在页面加载时有一些值但是我无法让它工作.我的select2代码如下:

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: '|',
   ajax: {
     url: url,
     dataType: 'json',
     data: function (term, page) {
        var targetname = $(this).attr('name');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

Ajax组合工作正常,只有初始值加载时遇到麻烦.我在下面尝试了这段代码,但无法让它工作:

initSelection : function (element, callback) …

初始化select2后,我需要设置一个数据数组.所以我想做这样的事情:

var select = $('#select').select2({});
select.data([
  {id: 1, text: 'value1'},
  {id: 1, text: 'value1'}
]);

但是我收到以下错误:

当附加到元素时,Select2不允许使用选项'data'.

我的HTML:

<select id="select" class="chzn-select"></select>

我应该使用什么而不是选择元素？

我需要设置搜索项目的来源

我正在使用令人敬畏的select2控件.

我正在尝试用内容清理和禁用select2,所以我这样做:

$("#select2id").empty();
$("#select2id").select2("disable");

好的,它可以工作,但如果我选择了一个值,所有项目都被删除,控件将被禁用,但仍会显示所选的值.我想清除所有内容,以便显示占位符.这是我做的一个例子,你可以看到这个问题:http://jsfiddle.net/BSEXM/

HTML:

<select id="sel" data-placeholder="This is my placeholder">
    <option></option>
    <option value="a">hello</option>
    <option value="b">all</option>
    <option value="c">stack</option>
    <option value="c">overflow</option>
</select>
<br>
<button id="pres">Disable and clear</button>
<button id="ena">Enable</button>

码:

$(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
        $("#sel").empty();
        $("#sel").select2("disable");
    });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

CSS:

#sel {
    margin: 20px;
}

你对此有什么想法或建议吗？

我正在使用jQuery select2多选下拉列表.我需要从代码的下拉列表中选择所有选项.基本上有一个Select All复选框,必须在其上实现此功能,我想从此复选框中选择/取消选择选项.

有没有办法限制用户可以使用Select2添加到输入字段的标签数量？

我有:

$('#tags').select2({
    containerCssClass: 'supplierTags',
    placeholder: "Usual suppliers...",
    minimumInputLength: 2,
    multiple: true,
    tokenSeparators: [",", " "],
    placeholder: 'Usual suppliers...',
            createSearchChoice: function(term, data) {
                if ($(data).filter(function() {
                    return this.name.localeCompare(term) === 0;
                }).length === 0) {
                    return {id: 0, name: term};
                }

            },
    id: function(e) {
        return e.id + ":" + e.name;
    },
    ajax: {
        url: ROOT + 'Call',
        dataType: 'json',
        type: 'POST',
        data: function(term, page) {
            return {
                call: 'Helpers->tagsHelper',
                q: term
            };
        },
        results: function(data, page) {
            return {
                results: …