我有this fiddle这是 Backbone/Marionette Playground fiddle 的扩展。我包含了 select2 js 和 css 文件。

是否可以编辑不是最后一个标签的标签?您可以通过在框中退格来进行编辑,但它只能让您触摸最后一个。我希望它像一个 Gmail“收件人”列表一样,您可以双击其中一个并对其进行编辑,然后它会返回到模糊的标签。

        this.$('#foo').select2({ 
            data: [{ 
                id: 1, 
                text: "test1.com" 
            }, { 
                id: 2, 
                text: "test2.com" 
            }], 
            multiple: true, 
            allowclear: true, 
            tags: [], 
            placeHolder: "Click Here!", 
            tokenSeparators: [',', ' '], 
            minimumResultsForSearch: 1 
        }); 

请您参考如下方法:

不幸的是,仅使用 select2 开箱即用的功能无法做到这一点。但它具有很强的可扩展性,因此它的窍门如下:

var $select2 = this.$('#foo').select2({ tags: true }); 
 
var select2 = $select2.data("select2");             
$(document.body).on("dblclick", ".select2-selection__choice", function(event) { 
    var $target = $(event.target); 
 
    // get the text and id of the clicked value 
    var targetData = $target.data("data"); 
    var clickedValue = targetData.text; 
    var clickedValueId = targetData.id; 
 
    // remove that value from select2 selection 
    var newValue = $.grep(select2.val(), function (value) { 
        return value !== clickedValueId; 
    }); 
    $select2.val(newValue).trigger("change"); 
 
    // set the currently entered text to equal the clicked value 
    select2.$container.find(".select2-search__field").val(clickedValue).trigger("input").focus(); 
}); 

还有一个JsFiddle ,当然。


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!