先看实现效果：

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. SPA框架 Angular、React、Vue

    指尖前端重构(React)技术调研分析   摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...

  2. 使用numpy处理数组

    def fun_ndarray(): a = [[1,2,7], [-6,-2,-3], [-4,-8,-55] ] b = np.array(a) b = np.abs(b)#取数组的绝对值 pri ...

  3. 应用Redis分布式锁解决重复通知的问题

    研究背景: 这几天被支付宝充值后通知所产生的重复处理问题搞得焦头烂额, 一周连续发生两次重复充钱的杯具, 发事故邮件发到想吐..为了挽回程序员的尊严, 我用了Redis的锁机制. 事故场景: 支付宝下 ...

  4. SSM基本配置详解

    需要查看SSM基本依赖和完整配置文件的到:SSM基本配置及依赖 示例项目:SSMDemo 1 Spring IOC容器配置 1.1 applicationContext.xml 1.1.1 配置数据源 ...

  5. Web应急：移动端劫持

    PC端访问正常,移动端访问出现异常,比如插入弹窗.嵌入式广告和跳转到第三方网站,将干扰用户的正常使用,对用户体验造成极大伤害. 现象描述 部分网站用户反馈,手机打开网站就会跳转到赌博网站. 问题处理 ...

  6. 异步编程的类型系统：promise & future & closure & observable----异步编程类型的结构和操作

    异步编程类型的结构和操作. 上下文维护. A promise represents the eventual result of an asynchronous operation. The prim ...

  7. UAVStack JVM监控分析工具：图形化展示采集及分析监控数据

    摘要:UAVStack推出的JVM监控分析工具提供基于页面的展现方式,以图形化的方式展示采集到的监控数据:同时提供JVM基本参数获取.内存dump.线程分析.内存分配采样和热点方法分析等功能. 引言 ...

  8. 七雄Q传封包辅助技术探讨回忆贴

    前言 网页游戏2013年左右最火的类型最烧钱游戏,当年的我也掉坑了.为了边玩还满足码农精神我奋力的学习如何来做外挂.2013年我工作的第二个年头.多一半…介绍下游戏<七雄Q传>是北京游戏谷 ...

  9. python 练习题：将列表中的大写字母转换成小写

    将列表中的大写字母转换成小写如果list中既包含字符串,又包含整数,由于非字符串类型没有lower()方法,L1 = ['Hello', 'World', 18, 'Apple', None]请修改列 ...

  10. .NET创建Windows定时任务

    创建Windows定时任务教程 1.创建一个控制台应用程序,保证程序正常运行. 2.右键点击我的电脑->点击管理. 3.在计算机管理弹出框->展开计算机管理(本地)->展开系统工具- ...