标签: jquery-select2

我已经搜索了互联网试图弄清楚为什么专有的AngularJS验证在使用jQuery.Select2和ui-select2指令时不起作用- 这是一个错误？

编辑:好的我发现它只是标记输入正在发生,我的选择下拉菜单和文本输入工作正常.

这是小提琴 http://jsfiddle.net/whiteb0x/ftEHu/

HTML:

  <form name="myForm" ng-controller="Ctrl">
    userType: <input ui-select2="version1" class="input-xlarge" type="hidden" name="input" ng-model="userType" required>
    <span class="error" ng-show="myForm.input.$error.required">Required</span><br>
    <tt>userType = {{userType}}</tt><br>
    <tt>myForm.input.$valid = {{myForm.input.$valid}} wtf???????!!!</tt><br>
    <tt>myForm.input.$error = {{myForm.input.$error}} huh????</tt><br>
    <tt>myForm.$valid = {{myForm.$valid}} | please hand me a gun :)</tt><br>
    <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br>
   </form>

使用Javascript:

var app = angular.module('myApp', ['ui.directives']);

function Ctrl($scope) {
  $scope.userType = '';
  $scope.version1 = {
      tags : null
  };    
}

Angular-ui select2标签的官方示例是:

myAppModule.controller('MyController', function($scope) {
    $scope.list_of_string = ['tag1', 'tag2']
    $scope.select2Options = {
        'multiple': true,
        'simple_tags': true,
        'tags': ['tag1', 'tag2', 'tag3', 'tag4']  // Can be empty list.
    };
});

我有这段代码:

$scope.select2Options = {
                        'multiple': true,
                        'simple_tags': true,
                        'tags': $scope.categoryNames
                    };

$scope.$watch(function () { return adminCrudService.getCategoriesForUpdate(); }, function () {
                $scope.action = "edit";
                $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
                if ($scope.categoriesForUpdate.length > null) {
                    $scope.categoryNames = [];
                    _.forEach($scope.categoriesForUpdate, function (item) {
                        $scope.categoryNames.push(item._backingStore.Name);
                    });

                }
            });

但这只是不起作用,当我点击Selcet2时,我得到没有找到匹配,我在$ watch中记录$ scope.categoryNames,数据就在那里(所以这部分工作正常).

所以我的问题是可以动态加载标签,如果可以,怎么样？

我在输入字段上使用Select2作为多选.我试图找出被点击的选项,但如果我查看单击选项("choice-selected")时抛出的事件,我可以找到的是event.target.value,它是包含所有选定选项的数据数组(选择).基本上我想访问点击的值,这样我就可以让用户在该特定选项中编辑自定义属性.我怎么能这样做呢？

JSFiddle问题:http://jsfiddle.net/JtTTF/

$(test).bind("choice-selected", function(e) {
 alert(e.target.value);
    // this is where i would like to access the clicked choice id so i can edit the custom data attribute "reason"
});

我试图让以下的jsfiddle与角度1.2.5一起工作 - 但它似乎只有在1.0.5时才能工作.

http://jsfiddle.net/hWXBv/25/

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

最终目标是产生一个gmail"发送到"样式输入 - 理想情况下完全是有角度的.jsfiddle使用jquery,这不是首选,但缺乏自己创建指令,我不确定存在的任何其他东西.

帮助让这个jsfiddle使用角度1.2.5或100%角度解决方案将解决我的问题.

谢谢.

我正在试图弄清楚当我处于标记模式时如何初始化jquery select2项目(因为我想允许用户输入新项目:

我看到这个例子:

 $("#e12").select2({tags:["red", "green", "blue"]});

哪个工作正常但我需要用已经添加的一些条目来实例化它.

但如果我想在页面加载时初始化一些现有项目,我尝试做这样的事情:

   var existingEmailAddresses= ["joe@abc.com","bill@abc.com"];

   $("#e12").select2({
            width: "600px",
            multiple: true,
            tags:["A", "B", "C"],
            initSelection: function (element, callback) {
                callback(existingEmailAddresses);
            }
        });

但这似乎没有奏效.

如何在使用标记模式时初始化输入？

编辑

我还想看看是否有任何钩子来验证添加的新标签.在我的情况下,我想确保它们是有效的电子邮件地址.

有一个现有的解决方案我被要求使用Select2 JQuery库进行增强.

有updatepanel一个保存按钮.那updatepanel是一个ASP.NET DropDownList.

在文件准备好我发行

$('.dropdownspecificclass').select2();

当页面首次呈现时,它看起来像预期的那样DropDownList具有Select2提供的标记视图.

单击保存按钮,保存过程在async没有页面刷新的情况下完成,但Select2下拉列表丢失了Select2样式,现在看起来像常规下拉列表.

如果我尝试将Select2类应用于控件的CssClass属性,则客户端上会发生JavaScript错误." 未为Select2 selectControlName定义未捕获的查询函数 "

思考？

我有以下代码:

$("#select2").select2({ closeOnSelect: false,
                        maximumSelectionLength: 5,
                        ...  // I have AJAX implemented here
                      });

当我closeOnSelect要false和有maximumSelectionLength集,我可以没有任何问题,选择超过5个项目.当我点击下拉列表同时选择了超过5个项目并尝试添加另一个项目时,我收到消息"您只能选择5个项目".

是否有任何变通方法让这两个属性一起工作而不会发生冲突？

我目前正在使用Select2 4.0.1.

更新:

我接受了pratikwebdev的建议,并添加了以下代码:

$("#select2").select2({ closeOnSelect: false,
                        maximumSelectionLength: 5,
                        ...  // I have AJAX implemented here
}).on("change", function(e) {
    if(e.target.length == 5) {
        $("#select2").select2({closeOnSelect: true,
                               maximumSelectionLength: 5,
        });
    }
});

这实际上将在我选择5个项目后关闭下拉列表,并且该maximumSelectionLength属性将正常工作.但现在closeOnSelect确实如此,所以每当我选择一些东西时,下拉菜单就会关闭.

有没有办法切换closeOnSelect？

以下是我的代码:

$('#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表单转发器(https://github.com/DubFriend/jquery.repeater)

我已经在google /上搜索了2天,但似乎无法让它工作.

include jquery/select2.js/jquery.repeater.js

var form = $('#form');
form.find('select').select2();

form.repeater({
    show: function () {
    $(this).show(function(){
        form.find('select').select2('destroy').select2();
    });
    },
    hide: function (remove) {
      $(this).hide(remove);
    }
});

问题是jQuery.repeater克隆了div标签,其中input2已经初始化并且已经更改了DOM,因此jQuery.repeater会复制更改的DOM.我试图在调用重复动作之前销毁select2,但是dindt也可以工作.

当错误替换输入select2显示在框上方时，我希望错误替换框下方。这是我的HTML：

<form id="form" class="form_required">
    <select type="text" id="test1" class="form-control select2" required>
        <option value="">&nbsp();</option>
        <option value="1">1</option>
    </select>
    <button type="button" onclick="insert()">Submit</button>
</form>

这是JavaScript：

$('.select2').select2()

$(".form_required").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

function insert(){ …