标签: select2

我是vue的新手,并且已经在http://vuejs.org/examples/select2.html上关注了他们的"自定义指令" .

仅在选择一个项目时效果很好,但是当您选择多个项目时,它只会通过第一个项目.我需要它来传递所有选定的值.

我有一个jsfiddle设置显示这里可用的代码. https://jsfiddle.net/f3kd6f14/1/

该指令如下;

 Vue.directive('select', {
    twoWay: true,
    priority: 1000,

    params: ['options'],

    bind: function() {
        var self = this
        $(this.el)
                .select2({
                    data: this.params.options
                })
                .on('change', function() {
                    self.set(this.value)
                })
    },
    update: function(value) {
        $(this.el).val(value).trigger('change')
    },
    unbind: function() {
        $(this.el).off().select2('destroy')
    }

任何帮助,将不胜感激.

我想让用户在使用select2时轻松选择所有匹配项.

现有守则

我目前使用select2 4.0.3和jquery 1.11有以下代码.

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="WY">Wyoming</option>
</select>

$(".js-example-basic-multiple").select2();

一个完整的代码https://jsfiddle.net/rwinch/t7112qcc/5/

我渴望的行为

有人可以帮我修改上面的代码,以便用户轻松选择所有匹配项.例如,如果屏幕看起来像:

然后用户按CTRL + A然后输入,结果是:

我试图使用select2来创建标签，但是当我编写一个新标签时，我失去了该字段的焦点（例如，单击其他位置），我写的内容被删除了。

在失去对select2的输入的关注之后，有没有办法创建一个新标签？

我正在使用Select2作为搜索下拉列表,但是当我在列表中选择一个项目时,它会一直显示前一个值.

我初始化Select2下拉列表:

$(document).ready(function() {
  $(".ordersSelect").select2();
});

然后设置所有选项:

<select class="ordersSelect" style="width:75%;">
  <option value>Select a priority...</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

所以我要说我从这段代码中选择1,我的控制台:

// when value is selected
$('.ordersSelect').on('select2:selecting', function(e) {
  var prioritySelection = $('.ordersSelect').select2('data')[0].text;
  console.log("DATA: " + prioritySelection);
});

将显示"DATA:选择优先级......".如果我然后选择说'3',控制台将显示"DATA:1".

它不断显示上一个选择的值.当我将"select2:choose"更改为"select2:selected"时,控制台消息永远不会出现.

我在这做错了什么..？

当我在页面上使用JQuery Select2时它工作正常.但是,当它位于引导框对话框模式中时,它无法正确显示.

这是我正在使用的jquery代码...

$.ajax({
        type: 'GET',
        url: src,
        success: function (data) {
            if (allowed) {
                bootbox.dialog({
                    title: dialogTitle,
                    message: $('#altForm'),
                    onEscape: true,
                    show: false // We will show it manually later
                }).on('shown.bs.modal', function () {
                    $('#enterBtn').hide();
                    $('#userPwd').hide();
                    $('.app-ctrl').prop('disabled', true);
                    $('#altForm').show();
                }).on('hide.bs.modal', function (e) {
                    $('#altForm').hide().appendTo('body');
                }).modal('show');
                $('.boop').parents('.bootbox').removeAttr('tabindex');
                $('.boop').select2();
            }
        }
    });

我相信Select2下拉列表的代码是有效的,因为当我注释掉初始化行时:$('.boop').select2(); 选择下拉列表变为常规下拉列表.但我不知道为什么它显示不正确.

使用select2.js我有一个下拉菜单,除了一件事情以外工作得很好:在加载时我无法点击下拉菜单中的第一个选项并将其显示为当前选择.单击第一个选项时,没有任何反应,如果下拉列表失去焦点,占位符将填充该框.如果选择了40个选项中的任何其他选项,则该值文本将显示在下拉框中,我可以在我的应用程序中使用该值.

选择了一个选项(第一个除外)并再次单击第一个选项,然后第一个选项值显示在框中,我可以毫无问题地使用它.此问题仅在加载时发生.

JS

$('.selectArea').select2({
        placeholder: 'Area #',
        allowClear: true,
        disabled: false
    });

我使用本地json文件填充了下拉列表:

$.getJSON('areaList.json', function(json) {
        for(i =  0; i < json.length; i++){
            $('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
        }
    });

HTML

<select class="selectArea" style='width: 120px; font-family: Arial'></select>

我的目标是能够在下拉框中加载带占位符的页面,然后能够单击第一个选项并将其填充到框中,以便我可以将该值用于应用程序的其他部分.

任何帮助将不胜感激.

我正在尝试使用引导程序在我的 html 中使用多个 select2 选择表单。但是我在调​​整大小时遇到​​了问题，select2 框不适用于网格，而且它还会扰乱下一个项目的大小。html

<div class="select2-container col-md-11">
    <select class="form-control s2" id="complaint" multiple="multiple" name=
    "complaint[]">
        <option value="bad_breath">
            Bad Breath
        </option>
        <option value="bleeding_gum">
            Bleeding Gum
        </option>
        <option value="swollen_gum">
            Swollen Gum
        </option>
        <option value="gum_pain">
            Gum Pain
        </option>
        <option value="loose_teeth">
            Loose Teeth
        </option>
        <option value="sensitive_teeth">
            Sensitive Teeth
        </option>
        <option value="darkened_teeth">
            Darkened Teeth
        </option>
        <option value="damaged_teeth">
            Damaged Teeth
        </option>
    </select>
</div>

JS

<script type="text/javascript">
$(".s2").select2({
    closeOnSelect: false
});
$(document).ready(function() {});

完整代码在这里http://www.codeply.com/go/Ly1UHW2HT2

以下是我的代码:

$('#cow_id_2').select2({
        allowClear: true,
        placeholder: "Search a cow/dam ID",
        formatNoMatches: function (term) {
            return "<a href=/'http://google.com/'>Add</a>";
        }
    });

当我尝试添加链接时,插件就会停止工作.我使用的是Select2 4.0.3版本

我有一个选择输入字段,我正在使用Select2 jQuery插件增强.我传递了minimumInputLength属性,让用户在填充匹配项之前键入几个字母.但是,如果需要,我不确定用户如何清除选择.

我试图传递allowClear属性,虽然它确实显示'X',但按钮不起作用,选择仍然存在.

编辑:

jsfiddle link: https://jsfiddle.net/8f1u48et/

我在我的 Angular2 项目中使用了ng2-select2，我想添加一些样式，例如宽度、高度、边框半径、字体粗细、字体大小……但我无法管理它。

我的 HTML 代码是这样的：

<select2 [data]="exampleData"></select2>

我还尝试将class和id添加到我的select2元素中，但它不起作用。你知道我该怎么做吗？