先看实现效果：

html 代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>mark</title>

    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">

    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

<div id="markValue" class="mark-selected label-selected"></div>

<input type="hidden" name="mark_label" id="mark_label"/>

<div class="layui-col-md12" id="labelItem">

    <div class="label-item" style="border-radius:6px;">

        <li value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>策划设计</span></li>

        <li value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>视频拍摄</span></li>

        <li value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>设计执行</span></li>

    </div>

</div>

<div id="companyValue" class="company-selected label-selected" style="margin-top: 130px;"></div>

<input type="hidden" name="company_label" id="company_label"/>

<input type="hidden" name="existedtext"/>

<div class="add-label" style="display:inline-block">

    <label style="font-weight:normal;">添加 :</label>

    <input type="text" id="companyName" class="form-control"

           style="width:200px;display:inline-block;border-radius:6px; "

           placeholder="请输入合作单位">

    <a id="add-company" class="layui-btn layui-btn-normal" style="border-radius:6px;">

        <span class="glyphicon glyphicon-plus glyphicon glyphicon-plus glyphicon-plus-button" aria-hidden="true"/>添加

    </a>

</div>

<div class="add-label" style="display:inline-block">

    <a class="layui-btn layui-btn-normal" style="width:200px;margin-top:30px;margin-left:100px;"

       onclick="submit()">提交</a>

</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="../layui/lay/modules/layer.js"></script>

<script type="text/javascript">

    var selectedText = [];

    $(function () {

        var initMarkVal = "";

        initMarkValue(initMarkVal);

        var initCompanyVal = "初始值1,初始值2";

        initCompanyValue(initCompanyVal);

        $(".label-item").on("click", "li", function () {

            var id = $(this).attr("value");

            var text = $(this).children("span:nth-child(2)").html();

            if ($(this).hasClass("selected")) {

                return false;

            }

            if (addMark(id, text)) {

                $(this).addClass("selected");

            }

        });

        $(".mark-selected").on("click", "li .delete", function () {

            var id = $(this).parent().attr("value");

            $(this).parent().remove();

            resetMarkValue();

            $(".label-item").find("li[value='" + id + "']").removeClass("selected");

        });

        $("#add-company").on("click", function () {

            var companyName = $("#companyName").val();

            if (companyName != null && companyName != "") {

                var index = selectedText.indexOf(companyName);

                if (index !== -)     //已经存在于已选择，不添加

                {

                    alert("合作单位已存在！");

                    return;

                } else {

                    addCompany(, companyName);

                    $("#companyName").val('');

                }

            } else {

                alert("请填写合作单位！");

            }

        });

        $(".company-selected").on("click", "li .delete", function () {

            $(this).parent().remove();

            resetCompanyText();

        });

    });

    function initMarkValue(val) {

        $("input[name='mark_label']").val(val);

        if (val) {

            var valArr = val.split(',');

            var len = $(".label-item").children("li").length;

            for (var i = ; i < len; i++) {

                $this = $(".label-item").children("li").eq(i);

                var id = $this.attr("value");

                var text = $this.children("span:nth-child(2)").html();

                if ($.inArray(id, valArr) >= ) {

                    var labelHTML = getAppendHTML(id, text);

                    $(".mark-selected").append(labelHTML);

                    $this.addClass("selected");

                }

            }

        }

    }

    function initCompanyValue(val) {

        $("input[name='company_label']").val(val);

        if (val) {

            var valArr = val.split(',');

            var len = valArr.length;

            for (var i = ; i < len; i++) {

                var labelHTML = getAppendHTML(i, valArr[i]);

                $(".company-selected").append(labelHTML);

            }

        }

    }

    function resetMarkValue() {

        var val = '';

        var len = $(".mark-selected").children("li").length;

        for (var i = ; i < len; i++) {

            var value = $(".mark-selected").children("li").eq(i).attr("value");

            val += value + ',';

        }

        $("input[name='mark_label']").val(val);

    }

    function addMark(id, text) {

        var labelHTML = getAppendHTML(id, text);

        $(".mark-selected").append(labelHTML);

        resetMarkValue();

        return true;

    }

    function addCompany(id, text) {

        var labelHTML = getAppendHTML(id, text);

        $(".company-selected").append(labelHTML);

        resetCompanyText();

        return true;

    }

    function resetCompanyText() {

        selectedText = [];

        var valtext = '';

        var text;

        var len = $(".company-selected").children("li").length;

        for (var i = ; i < len; i++) {

            text = $(".company-selected").children("li").eq(i).text();

            selectedText[i] = text;

            valtext += selectedText[i] + ',';

        }

        $("input[name='company_label']").val(valtext);

    }

    function submit() {

        var markVal = $("input[name='mark_label']").val();

        var companyVal = $("input[name='company_label']").val();

        alert(markVal);

        alert(companyVal);

    }

    function getAppendHTML(id, text) {

        return "<li value='" + id + "''>" + $.trim(text) + "<div class='delete'></div></li>";

    }

</script>

</body>

</html>

打包下载地址：

https://files.cnblogs.com/files/wukong1688/check.zip

实现代码也可参考之前文章：

https://www.cnblogs.com/wukong1688/p/11117864.html

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11130073.html

转载请著名出处！谢谢~~

[PHP] Layui + jquery 实现 实用的文章自定义标签的更多相关文章

  1. [PHP] JQuery+Layer实现添加删除自定义标签代码

    JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...

  2. 浅析MyBatis（三）：聊一聊MyBatis的实用插件与自定义插件

    在前面的文章中,笔者详细介绍了 MyBatis 框架的底层框架与运行流程,并且在理解运行流程的基础上手写了一个自己的 MyBatis 框架.看完前两篇文章后,相信读者对 MyBatis 的偏底层原理和 ...

  3. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  4. DTCMS自定义标签，获取所有栏目文章列表TOP，以及文章通用URL

    网站最近更新等地方,发现DTCMS没有获取所有栏目文章列表的标签,只能自己写 思路:获取所有栏目文章列表不难,难点在于linkurl的写法 1.制作获取所有文章列表标签 DTcms.Web.UI\La ...

  5. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  6. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  7. 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

    1)jquery  validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...

  8. 【jQuery】 实用 js

    [jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...

  9. phpcms发布文章自定义字段

    phpcms发布文章自定义字段1 进入后台 模型管理 新建模型 里面可以自定义字段了

随机推荐

  1. ShellScript之变量

    Shell脚本之变量学习 ##########################ShellScript初学者,文章摘自菜鸟教程################################ 1.She ...

  2. 阿里云RDS数据库备份同步到自建库方法（SHELL脚本）

    一.背景: 由于阿里云RDS生产库每天都需要备份且拷贝到自建读库,而如果使用阿里云的自动拷贝到只读实例, 费用太高, 故采用自编写同步脚本方法实现. 二.前提: 1). 已开通阿里云RDS, 且开启定 ...

  3. [转帖]微服务框架Spring Cloud介绍 Part1: 使用事件和消息队列实现分布式事务

    微服务框架Spring Cloud介绍 Part1: 使用事件和消息队列实现分布式事务 http://skaka.me/blog/2016/04/21/springcloud1/ APR 21ST,  ...

  4. 第七节：EF Core调用SQL语句和存储过程

    一. 查询类(FromSql) 1.说明 A. SQL查询必须返回实体的所有属性字段. B. 结果集中的列名必须与属性映射到的列名相匹配. C. SQL查询不能包含关联数据 D. 除Select以为的 ...

  5. char (*a)[N] 与 char* a[M]区别

    已知第二维 char (*a)[N]; //指向数组的指针,实际上这里的N并没有实际的约束意义,平时也很少这么用a = (char (*)[N])malloc(sizeof(char *) * m); ...

  6. 常用mysql系统表及命令

    常用系统表查看当前数据库连接ip信息– select * from information_schema.PROCESSLIST 当前mysql实例中所有数据库的信息– select * from i ...

  7. 【maven】idea的pom文件修改，引入新的jar包，无效，本地仓库始终没有下载新jar包的问题解决【idea pom Dependency not found】

    引入问题: idea的pom文件修改,引入新的jar包,无效,本地仓库始终没有下载新jar包的问题解决[idea  pom Dependency  not found] 如题,引入一个新的jar包,在 ...

  8. WPF 精修篇 WPF嵌入Winfrom控件

    原文:WPF 精修篇 WPF嵌入Winfrom控件 先增加DLL 支持 使用  WindowsFormsHost 来加载Forms的控件 引用命名空间 xmlns:forms="clr-na ...

  9. sitemap 文件的生成 sitemap文件和sitemapindex 索引文件的生成

    <?php /*****连接数据库 start*******/ $dbhost = "localhost"; $username = "root"; $u ...

  10. HBase统计表行数(RowCount)的四种方法

    背景:对于其他数据存储系统来说,统计表的行数是再基本不过的操作了,一般实现都非常简单:但对于HBase这种key-value存储结构的列式数据库,统计 RowCount 的方法却有好几种不同的花样,并 ...