使用jquery将值插入标签输入元素[关闭]答案

【问题标题】：Insert value with jquery to tags input element [closed]使用jquery将值插入标签输入元素[关闭]
【发布时间】：2020-10-01 02:48:08
【问题描述】：

我想通过 jquery 向标签输入元素 html 插入值。但是没用。

我的代码 JS：

$(document).ready(function(){        
  $('#tags-input').tagsInput();
  var tagsValue = 'Jakarta,Bogor,Bandung';
  $('#tags-input').val(tagsValue);
});

我的代码html：

<input type="text" class="form-control" name="city" id="tags-input" />

但是结果是空的

我想要的结果是

我该怎么做？请帮我。谢谢

【问题讨论】：

您是否在页面中包含插件文件？开发工具控制台中是否抛出任何错误？

标签： html jquery bootstrap-tags-input jquery-tags-input

【解决方案1】：

您需要使用标签输入的add方法。

$(document).ready(function(){        
  var tagInputEle = $('#tags-input');
  tagInputEle.tagsinput();
  tagInputEle.tagsinput('add', 'Jakarta');
  tagInputEle.tagsinput('add', 'Bogor');
  tagInputEle.tagsinput('add', 'Bandung');
});

.bootstrap-tagsinput .tag {
   background: red;
   padding: 4px;
   font-size: 14px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" integrity="sha512-9UR1ynHntZdqHnwXKTaOm1s6V9fExqejKvg5XMawEMToW4sSw+3jtLrYfZPijvnwnnE8Uol1O9BcAskoxgec+g==" crossorigin="anonymous"></script>

<input type="text" class="form-control" name="city" id="tags-input" />

【讨论】：

【解决方案2】：

在初始化插件之前更改设置值的顺序，它可以正常工作。

如果你初始化插件，你需要使用插件方法来插入标签值

$(document).ready(function() {
  var tagsValue = 'Jakarta,Bogor,Bandung';
  $('#tags-input').val(tagsValue).tagsinput();
});

.bootstrap-tagsinput .tag {
  background: red;
  padding: 4px;
  font-size: 14px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" integrity="sha512-9UR1ynHntZdqHnwXKTaOm1s6V9fExqejKvg5XMawEMToW4sSw+3jtLrYfZPijvnwnnE8Uol1O9BcAskoxgec+g==" crossorigin="anonymous"></script>

<input type="text" class="form-control" name="city" id="tags-input" />

【讨论】：