javascript - 通过单击将标签的文本添加到输入标签

标签 javascript jquery asp.net-mvc input tags

我想显示要提交或拒绝的信息。 我有一个 tag() 包含应检查的信息。 如果其中一些不正确,应添加到输入标签,然后单击拒绝按钮,所有输入标签数据都会传递到 Controller 。 下面的代码不起作用。 我不知道有更好的方法吗? 非常感谢您的关注。

    <html lang="en">
    <head>
    <title>example</title>

    <link href="@Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css")" rel="stylesheet">

    <script src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")"></script>

    <script src="@Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js")"></script>
</head>
<body>
    <a href="#" data-value="1">Name</a>
    <div style="width: 500px; margin: 0px auto;">
        <h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
        <input name="tags" id="input-tags" style="width:500px !important" />
    </div>
    <script>
        $("a").click(function () {
        i = $(this).data("value");
  $('#input-tags').tagsInput('add', i);

        });
    </script>
</body>
</html>

最佳答案

您使用的是 jQuery TagsInput 而不是 Bootstrap TagsInput,因此您应该使用 addTag 而不是 .tagsInput('add')

$('#input-tags').tagsInput();

$("a").click(function(e) {
  e.preventDefault();
  var i = $(this).data("value");
  $('#input-tags').addTag(i);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>

<a href="#" data-value="1">Name</a>
<div style="width: 500px; margin: 0px auto;">
  <h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
  <input name="tags" id="input-tags" data_role="tagsinput" style="width:500px !important" />
</div>

<强> Source

关于javascript - 通过单击将标签的文本添加到输入标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50654006/

相关文章:

c# - 无效的列名 C#

.net - Windows 身份验证提示两次

javascript - CreateJS (Animate CC) 单击时获取影片实例名称

javascript - 使用机器 IP 访问 localhost 会导致 Ajax 调用失败

jquery ajax默认成功函数与自定义函数

javascript - 在 HTML 中创建一个带有 float 标题的索引

asp.net-mvc - .Net Core MVC 部署(发布)缺少 View

javascript - 使用ajax设置html5媒体源

允许字母数字和点 (.) 的 JavaScript 正则表达式

javascript - Jquery - 从关联数组创建 URL