标签: jquery-select2-4

我正在使用jquery-select2 4.0.0,我想显示一个包含'&'的文本.

这是选项的代码:

<option value="123">
   123 - This & That
</option>

但是,Select2显示以下选项文本:

123 - This & That

如何让Select2正确显示specialchar？

请帮忙。

html：

<select id="select-client" class="form-control" style="width: 350px;"></select>

js：

$("#select-client").select2({
    ajax: {
        url: _app.url + "finduser",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 2,
    templateResult: formatClientRepo,
    templateSelection: formatClientRepoSelection,
    placeholder: "Enter user name"
});

结果我收到了这个：http : //prntscr.com/76jxvi 我发现了很多变体，例如 select 中的空选项，或者在select 中写入占位符，但什么也没有。

我的页面上有以下选择：

<select><option value="1" selected="selected">Caption</option></select>

我调用 select2 (v 4.0) init：

city.select2({
    ajax: {
        url: <...>,
        data: <...>,
        processResults: <...>,
        cache: true
    },
    escapeMarkup: function(markup){ return markup; },
    minimumInputLength: 0,
    templateResult: function(repo){ return repo.name; },
    templateSelection: function(repo){ return repo.name; }
});

问题是 select2 正在重置默认选定值并显示空白字符串。有没有办法在 select2 init 上设置默认值？

我正在尝试使用最新版本的 Select2 来查询我网站的 API 并返回一个多选。它正在获取正确的数据，甚至正确格式化下拉列表，将返回对象中的两个键组合为“(A-123) John Johnson”，但下拉列表没有响应鼠标悬停或点击。

我正在使用 select2.full.min.js 和 select2.min.css 文件。出于该项目的目的，我将它们包含在目录中并通过 cshtml 中的 Bundles 访问它们，而不是通过 CDN 访问它们。

HTML：

<div>
    <select class="user-list" multiple="multiple" style="width: 100%">
    </select>
</div>

目前，它看起来像这样，这就是我想要的：

不确定这是否相关，但是当我在搜索时浏览生成的源代码时，输​​入看起来不错，但下拉列表的代码显示为灰色，好像它被隐藏了一样。

根据我在此处和其他地方找到的其他建议，我尝试了几种不同的解决方案。我最终发现了 templateResult 和 templateSelection 应该如何工作（不是特别感谢文档），并尝试返回 ID，但我似乎仍然无法实际选择任何内容，甚至在我悬停时得到响应选项。

这是我的结论，包括一些调试以确保返回的对象有效。

JS：

        // Setup autocomplete/select for User filter
        $(".user-list").select2({
            ajax: {
                url: "[api url]",
                type: "GET",
                dataType: "json",
                data: function (params) {
                    return {
                        search: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data) {
                    console.log(JSON.stringify(data));
                    return {
                        results: data
                    };
                },
            }, …

我有一个包含一个文本输入和一个 select2 元素的表单（版本 4.0.0）。我希望当专注于文本输入时，select2 打开。

这是我尝试过的：

<select list="userAccountsMap.values" listKey="accountNo" listValue="accountNo"/>
<input id="destinationAccount" type="text" name="destinationAccount">

<script type="text/javascript">

('select').each(function( index ) {
         $(this).select2();
     }
});

$("#destinationAccount").focus(function () {    
   $("select").trigger('select2:open');
});

</script>

但它不工作。请参阅此处的小提琴：http : //jsfiddle.net/Hatamikhah/73wypp1w/1/

我不明白我的问题是什么。

所以我试图在我的Aurelia应用程序中使用Select2.我安装了Select2 jspm install select2,在我的app.html文件中我需要使用Select2 <require from="select2/js/select2.min.js"></require>.浏览器加载缩小的JS文件,但由于某种原因它也尝试加载

http:// localhost:3003/jspm_packages/github/select2/select2@4.0.0/js/select2.min .html.

为什么Aurelia试图加载我在<require>元素中指定的同一JS文件的HTML副本？我怎样才能解决这个问题？

谢谢

我有一个select2的问题,在我输入一个项目后我想再次使用相同的下拉列表,我似乎无法删除以前选择的项目

例如,假设我的id是"#StreamName",我认为这会清除它:

 $("#StreamName").val(null).trigger("change");

但它似乎仍然显示以前选择的项目.从查看html看来,我通过这样做蛮力:

$("#select2-StreamName-container").html("");

但这似乎我没有正确使用API​​,所以我想看看是否有其他建议或我是否遗漏了一些东西.

我正在使用Select2 4.0.1，我已经使用 ajax 根据用户输入填充结果，但是每当我搜索任何内容时都会select2列出第一页结果，但没有加载连续页面，也会在滚动时请求第二页。似乎我错过了一些东西。

$multiselect = $(element).select2({
    closeOnSelect: false,
    multiple: true,
    placeholder: 'Assign a new tag',
    tags: true,
    tokenSeparators: [","],
    ajax: {
      url: '/search_url',
      dataType: 'json',
      type: 'GET',
      delay: 250,
      data: function(params) {
        return {
          search: params.term,
          page: params.page
        };
      },
      processResults: function(data, params) {
        var more, new_data;
        params.page = params.page || 1;
        more = {
          more: (params.page * 20) < data.total_count
        };
        new_data = [];
        data.items.forEach(function(i, item) {
          new_data.push({
            id: i.name,
            text: i.name
          });
        }); …

如何<option>在听取select2:select事件时选择刚刚选择的内容？请注意,使用单选时很简单,因为只选择一个选项时,必须是刚刚选择的选项.我还希望能够找到在使用multiple-select(<select multiple>)时刚刚选择的选项.

在这种情况select2:unselect下,未经选择<option>的可以通过e.params.data.element,但事实并非如此select2:select.我没有看到为什么<option>不应该可用的原因,因为它是在这个时候创建​​的.select2:selecting但是,对于该事件,<option>尚未创建,并且在事件触发时显然无法使用.

我在 Rails 中使用 select2 和 gem Rails-select2，目前使用 4.0.3 版本。

我无法使 select2 的 ajax 版本工作，我将数据设置为数组的静态版本正在工作，而 ajax 版本则不然。

我没有收到任何错误，后端也没有 ajax 调用。

选择以 select2 样式显示为空，当我键入时，它不执行任何操作。

有没有办法调试或了解问题出在哪里？

我正在使用以下示例代码：

论观点：

<select class="js-data-example-ajax" style="width:100%">
<option value="3620194" selected="selected">Select a value......</option>
</select>

在 JavaScript 上：

$(".js-data-example-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are …