标签: jquery-select2

angular-ui的ui-select2文档显示您可以执行以下操作:

myAppModule.controller('MyController', function($scope) {
    $scope.select2Options = {
        allowClear:true
    };
});

<select ui-select2="select2Options" ng-model="select2">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

但是,在该点之后对$ scope.select2Options的更改不执行任何操作.如果ui-select2在这种情况下会观察select2Options的变化,并在它们发生变化时将它们发送给select2,那就太好了.

我需要根据所选内容动态更改maximumSelectionSize,并且执行类似下面的操作显然是错误的,因为您不应该在控制器中弄乱DOM.

<select id="mySelect2" ui-select2="{ allowClear: true}" ng-model="select2" ng-change="selectChange()">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

内部控制器:

$scope.selectChange = function() {
    if(...) {
        $("#mySelect2").select2({ maximumSelectionSize: 1 });
    } else {
        $("#mySelect2").select2({ maximumSelectionSize: 0 });
    }
}

如何在不使用DOM并在控制器中混合关注点的情况下将这些类型的选项传递给select2？(我无法通过指令想出一个干净的方法.)

谢谢!

更新:

基于/sf/answers/1187357461/,Stewie的回答,以及我自己的测试,我将以下代码添加到angular-ui ui-select的链接方法:

try {
    scope.uiSelect2 = angular.fromJson(attrs.uiSelect2);
} catch(e) {
    scope.$watch(attrs.uiSelect2, function (opts) {
        if (!opts) …

在我的引导项目中，我尝试使用插件select2，但我意识到，如果您使用此插件，将无法再使用validate插件来验证表单中的选择字段。我会避免使用商业插件引导验证程序。

<div class="container">
<div class="row">
    <form id="test_form" action="?">
        <div class="col-md-3">
            <div class="form-group">
                <label for="name">Foo</label>
                 <select class="form-control" id="foo" name="foo">
                     <option value=""></option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                 </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="name">Bar</label>
                <select class="form-control" id="bar" name="bar">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
        </div>
        <div class="col-md-1">
            <button type="submit" class="btn btn-primary">VALIDATE</button>
        </div>
    </form>
</div>
</div>

JS

/* select 2 plugin */
$('select#foo').select2();

/* Validation */
$("#test_form").validate({
    rules:
    {
        foo: { required: true },
        bar: { required: true }
    }, …

我想通过一个类使用多个select2，就像我在自动完成中所做的那样，但是我在select2中做不到相同的事情。

这是我的代码：

$('.select2-autocomplete').select2({
  placeholder: "Search",
  minimumInputLength: 1,
  multiple: true,
  ajax: {
    url: "http://example.com/autocomplete-results",
    dataType: 'json',
    data: function(term, page) {
      return {
        q: term,
        type: $(this.element).data('type')
      };
    },
    results: function(data, page) {
      return {
        results: data
      };
    }
  },
});

除此以外，一切工作正常：

type : $(this.element).data('type') 

在这里，我需要select2元素的数据类型值，但始终不确定，我怎么知道呢？

谢谢

编辑：

<input type="hidden" data-type="products" name="products" class="select2-autocomplete">
<input type="hidden" data-type="customers" name="customers" class="select2-autocomplete">

我想显示与ajax不同的结果，这就是我想通过ajax发送数据类型的原因

我正在使用jquery select2插件，但我想针对某些选择下拉列表禁用它。有没有一种方法可以排除将应用于插件的选择元素？我在想也许选择元素上的类告诉插件忽略它。

下午,

在一个网站上,我已经更新了许多使用select2 v.3.5.2到新版本4.0的元素(其中一些元素位于所有页面上的网站标题上)

不幸的是,在网站的某些页面上使用了X-editable jquery插件,并且该插件与select2的v 4.0不兼容(请阅读:根本不播放)

我的问题是: 我可以在某些页面上使用两个版本的select2吗？

如果是这样,怎么样？既然$(...).select2();盲目加载了哪个版本的select2 ....

示例代码:

    $("#search_species").select2({
        minimumInputLength: 1,
        maximumSelectionSize: 1,
        ajax: {
            url: "/php/search.php",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term
                };
            },
            processResults: function (data, params) {
                return { results: data };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; },k

        templateResult: formatarResultados,
        templateSelection: formatarSeleccao,

    }).on("select2:selecting", function(e) {
        console.log(e);

        // window.location.href = e.params.args.data.url;
        // $('.select2-drop').hide();

    });

我正在构建一个预先搜索字段,我遇到了问题.我不太确定要显示结果的正确方法是什么.当我在字段中键入时,会找到结果但字段不会更新.这是我的代码:

<select name='vendor_order[vendor_id]' id='vendor-select' class="form-control">
    <option>Choose a vendor</option>
 </select>
 <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script type='text/javascript'>
var $select = $('#vendor-select');
var client = algoliasearch('[INDEX]', '[PUBLISHABLE_KEY]');
var index = client.initIndex('Vendor_development');

// function formatSearchResult(res){
//    console.log('format search result: ', res);
// }

$select.select2({
    ajax: {
       // Custom transport to call Algolia's API
       transport: function(params) {
          var q = params.data.query.term;
          index.search(q, function searchDone(err, content) {
              if( !err ){
                  params.results(content);
              }
          });
      },
      // build Algolia's query parameters
      data: function(term, page) {
          return { query: term, hitsPerPage: …

我有这个字符串:

var product = "bj,tg,ap,nl";

现在我想让jQuery在select2选项列表中选择这些值.我知道如何选择一个:

$('#product').val('bj').trigger('change.select2');`

但是如何从该字符串中选择所有逗号分隔值？我想它应该是这样的:

$('#product').val('bj', 'tg', 'ap').trigger('change.select2');

所以我需要在'字符串"product"中添加一些空格.我该怎么做？我可以使用正则表达式吗？

我为Vue 2创建了一个自定义的select2输入元素。

我的问题是：为什么

<select2 v-model="vacancy.staff_member_id" @input="update(vacancy)"></select2>

工作，但是

<select2 v-model="vacancy.staff_member_id" @change="update(vacancy)"></select2>

不？

由于<input>Vue中的普通元素具有@change处理程序，因此如果我的自定义select2输入具有相同的效果会很好。

有关我的自定义元素的一些信息：

该元素的目的不是呈现所有<option>元素，而是仅呈现所需的那些元素，因为我们在一页上有很多select2输入，而在select2输入内有很多选项，这会导致页面加载变慢。

该解决方案使其速度更快。

<select2 v-model="vacancy.staff_member_id" @input="update(vacancy)"></select2>

我有一个下拉选择输入（使用select2插件构建），我的目标是每个选择的标签都采用color，以提高可读性。例如，第一个选择的标签将是蓝色，第二个将是红色等。

我没有做到这一点，至少有两个原因：

• 如何访问（DOM操作）所选标签？我可以访问select elmt的子级并检查它们是否被选中（使用data-select2-id？这是如何工作的，我不能在下面的示例中解释自己的值），但是由于我有10000+种可能性并且期望2 或3个选择，这似乎是次优的方法。

• 如何指定颜色？

我在这里阅读了如何更改输入的背景色，但这根本不是我要尝试做的。

实际上，我需要标记采用特定的颜色，以便用户可以将其映射到图表中对应的彩色条目。

您能告诉我如何解决这个最小的例子（小提琴）吗？

一个类似的问题存在，却一直没有得到答复，且无最小的例子。

添加：根据该线程，解决方案可能是为每种可能的选项赋予颜色，如下所示。但是由于我有很多可能的选择，所以实际上并没有。

option.line1 {
    background-color: #000000;
    color: #ffffff;
}

option.line2 {
    background-color: #000000;
    color: #ffff00;
}


<option class="line1" value="menu1">Menu Item 1</option>

在最初<select>具有多个属性隐藏的地方使用Select2时，占位符不会显示。查看代码，我可以看到选择器.select2-container--default .select2-search--inline .select2-search__field的宽度为0px（猜测是因为它是隐藏的）。

$('[data-trigger="open"]').on('click', function(){
	$('[data-target="open"]').toggleClass('hidden');
})

$('.select2').select2({
	width: '100%'
});

.hidden {
  display:none;
}

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

<p><a href="#" data-trigger="open">Open Select2 and watch no placeholder...</a></p>
<div class="hidden" data-target="open">
  <select name="select" id="select" class="select2" multiple data-placeholder="Select one or more...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

强制使用width: 100% !importantCSS规则只能部分解决问题：显示占位符，但每次选择项时输入字段都会增长太多

$('[data-trigger="open"]').on('click', function(){
	$('[data-target="open"]').toggleClass('hidden');
})

$('.select2').select2({
	width: '200px' // limit size to make the "growing "problem appear
});

.hidden …