Bootstrap tagsinput未设置itemValue选项时无法添加对象

时间:2015-08-10 17:52:20

标签: twitter-bootstrap bootstrap-tags-input

我已经看到了这个问题Bootstrap tagsinput add tag with id and value,但解决方案对我不起作用:

我发现为了让输入框识别我输入的标签,我要么必须有data-role = tagsinput要么叫$(“input”)。tagsinsput()。

例如。这适用于识别没有数据角色的标签:      

$('#meeting-tags').tagsinput();
$('#meeting-tags').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

但这不是:

$('#meeting-tags').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

但是,如果我想通过javascript添加项目,那么只有当我既没有数据角色也没有初始调用时它才会起作用。错误是在未设置itemValue选项时无法添加对象

例如。这有效,但现在它无法识别标签:

$('#meeting-tags').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });
$('#meeting-tags').tagsinput('add', { id: 'tag id', label: 'tag lable' });

但这不是,但现在它再次识别标签:

$('#meeting-tags').tagsinput();
$('#meeting-tags').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });
$('#meeting-tags').tagsinput('add', { id: 'tag id', label: 'tag lable' });

肯定有一种方法可以识别标签并添加项目吗?

8 个答案:

答案 0 :(得分:3)

我找到了另一种解决方法。

搜索字符串"当未设置itemValue选项时,无法添加对象"进入tagsinput.js文件。你会在插件的add函数中找到它:

$ echo -n | git hash-object -t tree --stdin
4b825dc642cb6eb9a060e54bf8d69288fbee4904

我只是强制项目从对象到字符串:

// Throw an error when trying to add an object while the itemValue option was not set
  if (typeof item === "object" && !self.objectItems){
    throw("Can't add objects when itemValue option is not set");
  }

这似乎完美无缺:)。希望这有帮助。

答案 1 :(得分:2)

初始化标签输入,如

 $('.div-tag').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });

添加动态代码

$('.div-tag').tagsinput('add', { id: 'tag id', label: 'tag lable' });

就是这样;

答案 2 :(得分:0)

来自tagsinput的de文档:仅当使用字符串作为标记时才可以这样做。设置itemValue选项时,将忽略此选项。

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

答案 3 :(得分:0)

您只需在输入标签中删除data-role。它将在具有实际选项的JavaScript之前初始化。

<input type="text" id="mytags" value=""

答案 4 :(得分:0)

删除“ data-role =“ tagsinput””并按如下所示使用

      <input type="text" id="galleryTag" />'
      <script>
      var ele = $('#galleryTag');
      ele.tagsinput({
      allowDuplicates: false,
      itemValue: 'value',
      itemText: 'text'
         });
      ele.tagsinput('add',{ "value":1,"text":"Amsterdam"});
      ele.tagsinput('add',{ "value":4,"text":"Washington"});
      ele.tagsinput('add',{ "value":7,"text":"Sydney");
    </script>

答案 5 :(得分:0)

我也遇到了这个问题,我按照以下步骤解决了这个问题。

  1. 初始化应该是正确的,在我的例子中,错误是我尝试了多次标记初始化。

  2. 仅初始化一次即可使用

不会再次初始化它,我发现主要问题是再次重复相同的代码。

我在这里分享我的代码

            
$('select#myId').tagsinput({
					  itemValue: 'value',
					  itemText: 'text',
					  tagClass: function(item) {
						    return ((item.removeDis && item.removeDis==true)  ? 'default-tag' : 'label-info');
						  }
				 });
         
  	$('select#myId').tagsinput('add',{
							'value' : somevalue,
							'text' : sometext,
							'removeDis' : true
						});
					 
		
        
<select required class="form-control" id="myId"
					name="myId" multiple></select>
        

答案 6 :(得分:-1)

从element.ier中删除数据角色。删除此部分 data-role =“ tagsinput”

答案 7 :(得分:-2)

好的,所以我想这个想法。您必须在致电

时删除data-role="tagsinput"
$('.div-tag').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

我认为这会产生冲突。所以从输入中删除data-role,然后像在Joe的回答中那样使用标记。

$('.div-tag').tagsinput('add', { id: 'tag id', label: 'tag lable' });