标签: select2

我有一个select2下拉列表,如下所示:

    $(function () {
  $("#itemSelect").select2().on("select2:select", function (e) {
   $("#itemSelect").val(-1).trigger("change");
        var id = e.params.data.title;
        var url = siteRoot + "/site/item?itemID=" + id ;
        $("#Container").load(url);
    });
});

它从我的模型中获取它的值:

<select class="js-data-example-ajax" aria-expanded="true" style="width: 100%; display: none;" id="itemSelect">
<option disabled selected value="-1"> Search by item </option>
@foreach (var item in Model)
{
    <option text="@item.Id" title="@item.Id">
        item.Name
    </option>
}

一切正常,除了当我选择一个项目并且已经加载时,我可以将鼠标悬停在下拉列表上,它会显示项目中的ID.我不想出示身份证!

在图片中,您可以看到当我将鼠标悬停在"冰茶"上时显示的下拉列表和项目编号

我知道这是因为select2得到了id var id = e.params.data.title;,但我怎么能改变这个呢？它不合作 var id = e.params.data.id;

我尝试使用工具提示,但我是新手.

//$("#select2-itemSelect-container").tooltip({
//    title: "Search item",

//    placement: "auto"
//});

我只是想在鼠标悬停时删除下拉列表中的ID.感谢每一位帮助.

好吧,我觉得我在这里疯了.我正在使用select2 jquery插件(版本4),并通过ajax检索数据.因此,您可以键入名称,它将返回该联系信息.但我也希望回复联系人所属的组织.

这是我的select2初始化:

$('#contact_id').select2({
    ajax: {
        url: 'example.com/contacts/select',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term,
                page: params.page
            };
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 3,
    maximumSelectionLength: 1
});

这是我要返回的数据(laravel框架):

foreach($contacts as $con) {
    $results[] = [
        'id'    => $con->contact_id,
        'text'  => $con->full_name,
        'org'   => [
            'org_id'        => $con->organization_id,
            'org_name'      => $con->org_name
        ]
    ];
}

return response()->json($results);

那么'org'是不应该通过select2附加到创建的选项或select元素？所以我可以做类似$('#contact_id').select2().find(':selected').data('data').org或$('#contact_id').select2().data('data').org类似的事情？

理想情况下,这看起来像:

<select>
    <option value="43" data-org="{org_id:377, …

我希望我的问题有道理 - 不确定最好的方式来形容这一点.我有一个分组的Select2选择表单输入如下:

• 蔬菜
• 生菜
• 番茄
• 洋葱
• 水果
• 苹果
• 桔子
• 香蕉
• 价差
• vegemite发表
• 花生酱
• 花生酱

所以你开始输入App,当然你可以Apples从Select2下拉菜单中获得.如果你输入veg你Vegemite和Vegetables组标题,但所有的选项都隐藏.如果搜索字词与组标题匹配,我想保持所有组选项可见.

我在select2源代码中进行了一些挖掘,我认为它实际上很容易,但我可能是错的,如果我是对的,我会被困在如何使它工作.以下是源代码: https://github.com/select2/select2/blob/81a4a68b113e0d3e0fb1d0f8b1c33ae1b48ba04f/src/js/select2/defaults.js:

我创建的Gist与尝试将其粘贴在此处:

https://gist.github.com/jasper502/40b810e55b2195476342

我切换了代码的顺序,并进行了一些轻微的变量名称更改以反映这一点.我认为这将使期权组保持开放.我试图基于此创建一个自定义匹配器(请参阅我的要点),但我被困在它调用的地方DIACRITICS:

https://github.com/select2/select2/blob/8ad8f200ba8c9429d636453b8ee3bcf593e8c87a/src/js/select2/diacritics.js

经过一些谷歌搜索,我意识到这正在取代重音字符,我知道我没有,所以我删除了那部分.

现在我的匹配器TypeError: data.indexOf is not a function. (In 'data.indexOf(term)', 'data.indexOf' is undefined) 在我的浏览器中出错了.

我相信我在这里非常接近但是我有点超过我的经验和/或技能水平来完成这个.任何指针或想法将不胜感激.

UPDATE

这是一个与我合作的JSfiddle:

https://jsfiddle.net/jasper502/xfw4tmbx/9/

我有一个选择2多选选项

<select multiple name="event_type[]" class="form-control" id="selectEvents">
   @foreach ($eTypes as $type)
       <option>{{$type}}</option>
   @endforeach
</select>

我想设置一些默认值,以防用户正在编辑表单.我通过这样做成功地做到了这一点

var s2 = $("#selectEvents").select2({
    placeholder: "Choose event type",
    tags: true
});

s2.val(["Trade Fair", "CA", "Party"]).trigger("change"); //CA doesn't show as a default

但问题是我允许使用tags: trueselect2选项的用户生成的选项.

当我设置最初在html选项中的默认值时,它可以工作,但是当我设置用户生成的默认值时,它不起作用.

这是我第一次使用select2.

我怎样才能实现这一目标？

我在Aurelia创建了一个自定义元素.

import {bindable, inject, customElement, bindingMode} from 'aurelia-framework';
import 'select2';
import * as $ from 'jquery';
import {BindingSignaler} from "aurelia-templating-resources";

@customElement('select2')
@inject(Element, BindingSignaler)
export class Select2CustomMultiselect {
    @bindable name = null;    // name/id of custom select
    @bindable selected = null;  // default selected values
    @bindable ({defaultBindingMode: bindingMode.oneWay, attribute:"options"}) source:Array<{id:number, name:any}>= [];   // array of options with id/name properties
    @bindable placeholder = "";
    @bindable allow_clear = true;
    private $select2: $;

    constructor(private element, private signaler:BindingSignaler) {
    }

    attached() {
        let $select = …

我试图为我的网站集成标记/自动完成功能.它通过选项文本进行处理.我几乎接近结果但仍然悬挂.

现在,当您尝试选择选项文本时,将显示相关文本.但现在我想通过选项值显示加德满都或相关选项文本搜索.

例如:当我们将搜索值a001时, 加德满都将出现并选择与a002相同,它将显示为pokhara

$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%',
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
     id: term,
     text: term,
     value: true // add additional parameters
    }
  }
});

.select2-container {
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select"  multiple="multiple">
  <option value="a001">Kathmandu</option>
  <option value="a002">Pokhara</option>
  <option value="a003">Lalitpur</option>
</select>

我认为在通过值搜索后我很接近并点击它会显示相关的id选项.但我只想要像pokhara kathmandu这样的选项文本而不是选择区域的ID.

我正在使用一系列内联选择输入构建一个"自然语言"搜索表单,使用jQuery Select2进行样式设置.Select2输入的宽度似乎设置为初始化时所选选项的宽度,这很好.我只是无法弄清楚如何更改所选选项时更新宽度.有任何想法吗？

非常感谢!

我正在使用select2 4.0.3.我有一个select2框用于输入电子邮件地址,我想确保所有电子邮件地址都包含在内.val(),也是用户在搜索字段中输入的地址.

表单字段由引用$('.invite-emails-field').当我按下发送按钮,在事件处理程序$('.invite-emails-field').val()只是给我的前两个地址test1@example.com和test2@example.com,而第三个地址(test3@example.com).

这是我初始化select2元素的方法:

$('.invite-emails-field').select2({
  tags: true,
  tokenSeparators: [',', ' '],
  selectOnBlur: true
});

在selectOnBlur没有任何效果,我无法找到任何东西,关于选择2 v4的工作.我尝试在各种元素上发射几个事件,但都没有奏效.

我希望当我按下Send按钮时,我可以调用select2框来触发为搜索字段中的内容创建标记test3@example.com,然后.val()返回一个包含所有三个地址的数组.

更新:我为你创建了一个jsFiddle.像这样输入输入:

然后按"发送"按钮,您将看到:

其中,test3@example.com从输出丢失.

请注意,在我的实际应用程序中,我已禁用下拉列表,因为我只想要标记行为.

我已select2通过以下方式下载为节点模块:

npm install select2

并把它包括在我的app.js:

require('select2')($);

Uncaught TypeError: Object.defineProperty called on non-object(…)

来自select2.js:

S2.define('select2/core',[
  'jquery',
  './options',
  './utils',
  './keys'
], function ($, Options, Utils, KEYS) {
(...)
}

是否因为模块封装器select2仅适用于AMD且与CommonJS不兼容而发生？

我有一个select2选择菜单.

剥离版本例如:

<div class="form-group has-error">
        <select name="description_id" class="select2">

// <options>

</div>

应用has-error到文本输入将在输入周围显示红色边框.这不适用于select2菜单.我错过了什么？

我正在使用bootstrap3和最新的select2:

https://select2.github.io/

我已经阅读了这个页面并尝试了解决方案,但它不起作用:

https://xcellerant.net/2013/12/05/adding-bootstrap-error-styling-to-a-select2/