使用以下html:

<input type='hidden' id='cantseeme'>

我在动态创建Select2控件并添加我的选项时没有遇到任何问题:

// simplified example
var select2_ary = [];

select2_ary.push({
    id : "one",
    text : "one"
});
select2_ary.push({
    id : "two",
    text : "two"
});

$("#cantseeme").select2({
    placeholder : "Pick a number",
    data : select2_ary
});

但是,我似乎无法弄清楚如何添加optgroups这种方式.我在github上发现了这个讨论,并在博客上发表了这篇文章,但前者似乎没有讨论动态optgroup添加,我根本无法理解后者.

有人有主意吗？

$("#e2").select2("val")返回值,但我不想.$listtypes['name'] .从数据名称或选项标签显示中获取以太.

我想获取所选选项的选项数据名称,我该如何实现？

这是我的选择生成器

foreach($core->list_types() as $listtypes){
echo "
<option 
  data-name='".$listtypes['name'] ."' 
  value='".$listtypes['id']."'>
  ".$listtypes['name'] ."
</option>";
}

我使用webpack管理我的所有资产,当我使用此代码来要求select2(https://github.com/select2/select2)我得到了错误

$(...).select2不是函数.

require.ensure(['./vendors/select2'],function (require) {
    require('./site');
});

// site.js
(function ($) {
    $(document).ready(function () {
        $(".js-1example-basic-single").select2();
    });
})(jQuery);

我认为模块导出有问题.我尝试了许多搜索,但没有希望.

有人请告诉我该怎么做,花了我大约10个小时.

谢谢!

我正在尝试使用createSearchChoice函数,以允许用户在默认列表不足时输入自己的选择.当我尝试在<select>元素上使用此函数时,我收到以下错误:

Error: Error: Option 'createSearchChoice' is not allowed for Select2 when attached to a <select> element.

我尝试使用<input type='hidden'>元素,但现在得到以下错误:

Error: uncaught exception: query function not defined for Select2 'MyInputName'

我宁愿使用SELECT元素保持与现有的代码(需要选择多个选项的能力)线,但只需要一个用户能够输入除了从先前的列表中选择自己的选项.

我一直在试图从使用selenium webdriver的ajax启用的select2选择列表中选择一个选项.我已经设法使用IE webdriver而不是firefox.这是我对IE的hacky解决方案

 public static void SetSelect2Option(this IWebDriver driver, By locator, string subContainerClass, string searchTerm, TimeSpan? ajaxWaitTimeSpan = null)
    {
        var select2Product = driver.FindElement(locator);
        select2Product.Click();
        var searchBox = driver.FindElement(By.CssSelector(subContainerClass + " .select2-input"));
        searchBox.SendKeys(searchTerm);
        if (ajaxWaitTimeSpan != null)
        {
            driver.Manage().Timeouts().ImplicitlyWait(ajaxWaitTimeSpan.Value);
        }
        var selectedItem = driver.FindElements(By.CssSelector(subContainerClass + " .select2-results li")).First();
        selectedItem.Click();
        selectedItem.SendKeys(Keys.Enter);
    }

在Firefox中,此解决方案一直运行到SendKeys调用的位置,它只是挂起并继续下一步而不实际触发select2的事件来填充所选项目.

我也厌倦了使用http://code.google.com/p/selenium/wiki/AdvancedUserInteractions api,结果相似.

有没有人遇到过类似的问题？

我使用Select2搜索框构建了一个web-app,它通过AJAX连接到我们的后端.搜索框将查询(例如"APPLES")传递给后端,然后后端更新页面.如何以编程方式将搜索查询注入搜索框？我需要传入"val",以便select2通过AJAX调用后端并更新页面.我确信这很明显,但我在文档中找不到它.

例如,我希望用户单击一个按钮并在搜索字段中自动填充"APPLES"一词,然后让页面更新,而不是强迫用户在搜索框中键入"APPLES".

谢谢!

在Kevin的评论之后,我不处于这种状态,其中文本嵌入在搜索框中,并且选择器已经选择了正确的项目.如何提交(或触发)此请求,我尝试了"keydown","pressdown","submit","click"(清除框)等.

这与关于如何将类添加到select2元素的这个问题非常相似,但是那里的答案似乎针对的是早期版本的框架,它在v4.0中经历了一些重大变化

根据这个问题,以添加额外的自定义类来选择2容器,有几个无证属性,你可以传递给选择2的构造,包括:containerCss,containerCssClass,dropdownCss,和dropdownCssClass.

但是在版本4中,当我运行以下代码时:

$('.select2').select2({
    containerCss: "wrap"
});

我收到以下错误:

未捕获错误:没有select2/compat/containerCss

如何在v4.0中将类传递给Select2？

这是StackSnippets中的一个例子:

$('.select2').select2({
    containerCss: "wrap"
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2 narrow wrap">
  <option value="AL">Algebra</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

我有一个select2指令,用于多个国家/地区的自定义查询以获取数据:

// Directive
<input ng-model="filters.countries" ui-select2="filters.countryOptions"
    data-placeholder="Choose a country...">

// filters.countryOptions
{ 
    multiple: true,
    query: function() { 
        get_list_of_countries(); 
    }
}

// Formatted data from remote source
[
    {id: 'US', text: 'United States'},
    {id: 'CA', text: 'Canada'} ...
]

我正在尝试使用以下方法在控制器中设置最初选择的值:

$scope.filters.countries = [{id: 'US', text: 'United States'}];

这确实正确地设置了模型,但这是在select2初始化发生之前发生的.当我逐步执行剩余的初始化代码时,输​​入会[Object]在最终消隐$scope.filters.countries和输入之前暂时显示,但它不会在输入中显示占位符文本.

为了解决这个问题,我使用以下方法重置模型的初始值:

$scope.$on('$viewContentLoaded', function() {
    setTimeout(function() {
        $scope.filters.countries = [{id: 'US', text: 'United States'}];
    }, 100);
});

使用a似乎非常hackish setTimeout.有没有更好的方法让我失踪？

更新1

根据ProLoser的要求,这里有一个demo和github票.

演示:http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ？p = preview

GitHub问题:https …

根据标题,是否有办法强制select2始终创建下拉列表而不是下拉？

当你在下拉列表上方滚动,添加新的CSS类"select2-drop-above"或两者兼而有之时,似乎还有一些javascript导致翻转.

编辑:我应该指定我通过select2-rails拉动库.我希望有一种解决方法,不涉及在我自己拉动整个select2 lib并直接编辑select2.js文件.

我在我的表单中有select2多选字段,我想在选中它后从下拉列表中删除所选选项,如果从列表中删除它,再次将其添加到列表中.此外,添加的项目应与选择的顺序相同.当前select2(4.0)不会删除所选项目,并且它按照它们在下拉列表中显示的顺序显示所选项目,而不是按选择顺序显示.

$(document).ready(function(){
    $('#dynamicAttributes').select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600
     });
 });

JSFiddle:https://jsfiddle.net/rd62bhbm/