标签: jquery-select2

我使用js库select2.这是我现在拥有的截图:
开始:

点击下拉列表:

现在可以有一个输入字段,而不是直接下拉列表吗？我知道这是可能的,因为你可以在select2网站上找到它.一个例子是:

但文档非常简短.这就是我现在拥有的:

<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/>

function createQuestionTags(data, question_number){
  $(".question" + question_number).select2({
    createSearchChoice: function (term, data) {
      if ($(data).filter(function () {
        return this.text.localeCompare(term) === 0;
      }).length === 0) {
        return {
          id: term,
          text: term
        };
      }
    },
    data: data,
    placeholder: "Enter Question",
    allowClear:true
  });
}

(数据是从ajax调用接收的)

有没有办法限制用户可以使用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: …

我想单击一下取消选择所有值而不id单独使用每个值.

我摆弄了一会儿,但这只取消了第一个值.有什么建议？

这是我尝试取消选择的方式:

$( "#mybutton" ).click(function() {    
   $("select").select2('val', '')
});

http://jsfiddle.net/6hZFU/75/

我正在尝试使用jquey.validation插件验证select2字段,但没有任何反应.

我想要选择必填字段.

我正在使用这个自定义验证功能:

$.validator.addMethod("requiredcountry", function(value, element, arg){
              return arg != value;
         }, "Value must not equal arg.");

这是规则:

rules:
{
 country:
 {
         required: true,
         requiredcountry: ""
 }
}

我应该使用哪个select2字段来匹配规则？

我很感激如何让select2与jquery.validation一起工作

10倍

在这个从远程源加载的数据示例中,我可以看到图像和其他html元素呈现为选项.我想使用本地数组中的数据完成同样的事情.我已经尝试构建一个数组,如文档中所述并添加data选项,但html呈现为明文:

var data = [
  { id: 0, text: '<div style="color:green">enhancement</div>' },
  { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }];

$("select").select2({
  data: data
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select></select>

如何将html内容添加到select2选项？

当我创建由另一个select2下拉列表中的选择动态驱动的select2下拉列表时,allowClear更新下拉列表的按钮将被禁用.

如果我在a上构建select2 select,销毁它,更新html并重建它似乎并不重要:

var enableSelect2 = function () {
        $(this).select2({
            width: '200px',
            allowClear: true,
            minimumResultsForSearch: 7,
            formatResult: function (result, container, query, escapeMarkup) {
                var markup = [];
                markMatchedSelect2Text(result.text, query.term, markup, escapeMarkup);
                return markup.join('');
            }
        });
    },
    populateDropdown = function () {
        var filterBy = this.id,
            t = $(this);
        $.ajax({
            type: 'post',
            url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(),
            success: function (data) {
                var toRebuild,
                    target;
                if (filterBy === 'panel_id') { …

我有一个包含多个文本输入和一些select2元素的表单.使用键盘在字段之间切换工作正常 - Select2元素的行为类似于表单元素,并在Tab键时获得焦点.我想知道当Select2元素获得焦点时是否可以打开下拉列表.

这是我到目前为止所尝试的:

$("#myid").select2().on('select2-focus', function(){
     $(this).select2('open');
});

但是使用此代码会在选择后再次打开下拉列表.

我有一个Select2自动完成输入(通过SonataAdmin构建),但在我的生活中无法弄清楚如何以编程方式将其设置为已知的键/值对.

这里有一个JS小提琴,大致显示了我的内容.我想知道的是我可以将哪些功能附加到按钮上

• Select2字段向用户显示文本"NEW VALUE",和
• 将表单发送到服务器时,Select2字段将提交值"1"

我已经尝试了jQuery和Select2 data以及val方法的各种组合,在页面上针对各种输入调用,但似乎没有任何工作......当然有一些方法可以做到这一点？

- 编辑 -

下面接受的答案非常有用,有助于阐明初始化选择的正确方法,并解释initSelection的用途.

话虽如此,我最大的错误似乎是我试图触发变化的方式.

我用的是:

$(element).select2('data', newObject).trigger('change');

但是这会导致addselect2的change事件中出现一个空对象.

相反,如果您使用:

$(element).select2('data', newObject, true);

那么代码可以正常工作,newObject可以在select2的change事件中使用,并且值正确设置.

我希望这些额外的信息可以帮助别人!

我正在开发一个使用Select2(版本3.5.1)的应用程序.设置此下拉/自动填充字段的HTML如下所示:

<input id="mySelect" class="form-control" type="hidden">

form-control这个片段中的类来自Bootstrap.我正在使用以下代码从JavaScript初始化此字段:

function getItemFormat(item) {
  var format = '<div>' + item.ItemName + '</div>';
  return format;
}

$(function() {
  $('#mySelect').select2({
    minimumInputLength: 5,
    placeholder: 'Search for an item',
    allowClear: true,
    ajax: {
      url: '/api/getItems',
      dataType: 'json',
      quietMillis: 250,
      data: function (term, page) {
        return {
          query: term
        };
      },
      results: function (data, page) {
        return { results: data, id: 'ItemId', text: 'ItemText' };
      }
    },
    formatResult: getItemFormat,
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) { return m; }
  }); …

我正在使用DataTables的服务器端实现,yadcf和select2用于增加功能.用于填充表的数据是通过对Django视图的Ajax请求获取的,select2自动完成功能的数据也是如此; 但是从一个单独的Django视图.

我的问题如下.如果搜索查询不返回结果,则select2搜索字段中的值将消失,并且无法在DataTable中重置 - 您必须改为刷新页面.非select2字段中的值仍然可见,可以重置.

有问题列中的过滤器类型multi_select具有选择类型select2.没有问题的列内过滤器类型range_date和range_date使用bootstrap-datetimepicker作为日期选择器类型.

下面是我的select2列参数.

{
 "column_number": 3,
 "filter_type": "multi_select",
 "select_type": "select2",
 "select_type_options": {
    dropdownCssClass : 'bigdrop',
    multiple: true,
    minimumInputLength: 1,
    ajax: {
      url: '{% url 'ffTestApp:searchData' 'product' %}',
      delay: 250,
      dataType: 'json',
      data: function (params) {
        return {
          q: params.term,
          v: yadcf.exGetColumnFilterVal(table,4),
          s: yadcf.exGetColumnFilterVal(table,5)
        };
      },
      processResults: function (data, params) {
        params.page = params.page || 1;
        return {
          results: data.items
        };
      },
    },
    escapeMarkup: function (markup) { …