javascript - 如何向 Bootstrap 标签选择输入添加默认值？

Question

我正在使用Bootstrap tag plugin我使用以下代码成功地向其添加了一些标签:

$(function () {            
                var data = [{"id":"1","value":"painting-works"},{"id":"2","value":"plumbing-works"},{"id":"3","value":"programming"}];    
                var states = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    local: data
                });
                states.initialize();
                $("#tags").tagsinput({
                    itemValue: 'id',
                    itemText: 'value',
                    allowDuplicates: false,
                    maxTags: 1,    
                    typeaheadjs: {
                        name: "states",
                        displayKey: 'value',
                        source: states.ttAdapter(),
                    },
                    freeInput: true
                });  
});

输入元素是

<select placeholder=""  class="bootstrap-tagsinput"  id="tags"></select> 

标签添加成功

但我想要的是在页面加载时向输入元素添加默认值，如下所示

我已经尝试过这段代码

$('#tags').tagsinput('add', 'new');

但它只添加了一个新标签我尝试使用 jQuery

$('#tags').val("painting-works");

但是没有成功，我该怎么办？

Answer 1

请注意，您使用对象数组作为数据，因此您需要在页面加载时将其中一个对象传递给 tagsInput

$('#tags').tagsinput('add', {"id":"1","value":"painting-works"});  

这是jsfiddle与解决方案