LOT.UI分解系列汇总：http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI开源地址如下：https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

这个必须说下，本来是用Bootstrap-Select做的，很漂亮，正好后台也是Bootstrap。后来发现不能满足需求。标签有则选，没则添加 而Bootstrap-Select的文本框是不可以手动输入的==》so，用了Select2，这个可以不依赖Bootstrap

两种我都做了Demo，至于取舍就看你自己了~

先看在LoT.UI里面的应用效果图：

Bootstrap-Select：（诸如权限分配，菜单分配都可以用）

--------------------------------------------------------------------------------------------------------------------------------------------------------

Select2：（通用，但丑了点。可后期美化）

----------------------------------------------------------------------------------------------------------------------------------------------------------

Bootstrap-Select 演示(https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/select.html)

BootStrap-Select我这边就不具体说了，demo里面有演示，这边说下Select2

核心代码(https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/select2.html)

1.样式部分：

2.HTML部分

3.Script部分

完整代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <link href="/open/select2/select2.min.css" rel="stylesheet" />

</head>

<body>

    <select style="width:50%;" id="lot-tagSelect" multiple>

        <optgroup label="SQL">

            <option>MySql</option>

            <option>Sqlite</option>

            <option>SQLServer</option>

        </optgroup>

        <optgroup label="Other">

            <option>C#</option>

            <option>EF</option>

            <option>MVC</option>

            <option>Dapper</option>

            <option>Ado.Net</option>

        </optgroup>

    </select>

    <button id="btn">获取选中项的值</button>

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="/open/select2/select2.min.js"></script>

    <script type="text/javascript">

        $('#lot-tagSelect').select2({

            tags: true,

            tokenSeparators: [',', ' ']

        });

        $('#btn').click(function () {

            var ids = $.map($('#lot-tagSelect').select2("data"), function (row) {

                return row.text;

            });

            alert(ids.join(','));

        });

    </script>

</body>

</html>

开源组件：

https://github.com/silviomoreto/bootstrap-select

https://github.com/select2/select2

08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器的更多相关文章

  1. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  2. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  5. 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示（可自动切换背景）

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  6. 02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  7. 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器

    LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d ...

  9. Android通用框架设计与完整电商APP开发系列文章

    作者|傅猿猿 责编|Javen205 有福利 有福利 有福利 鸣谢 感谢@傅猿猿 邀请写此系列文章 Android通用框架设计与完整电商APP开发 课程介绍 [导学视频] [课程详细介绍] 以下是部分 ...

随机推荐

  1. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  2. 我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  3. SQL Server 常用内置函数（built-in）持续整理

    本文用于收集在运维中经常使用的系统内置函数,持续整理中 一,常用Metadata函数 1,查看数据库的ID和Name db_id(‘DB Name’),db_name('DB ID') 2,查看对象的 ...

  4. favicon.ioc使用以及注意事项

    1.效果 2.使用引入方法 2.1 注意事项:(把图标命名为favicon.ico,并且放在根目录下,同时使用Link标签,多重保险) 浏览器默认使用根目录下的favicon.ico 图标(如果你并没 ...

  5. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章：创建基本的MVC Web站点

    在这一章中,我们将学习如何使用基架快速搭建和运行一个简单的Microsoft ASP.NET MVC Web站点.在我们马上投入学习和编码之前,我们首先了解一些有关ASP.NET MVC和Entity ...

  6. [.NET] C# 知识回顾 - 委托 delegate （续）

    C# 知识回顾 - 委托 delegate (续) [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6046171.html 序 上篇<C# 知识回 ...

  7. MyBatis源码分析（一）开篇

    源码学习的好处不用多说,Mybatis源码量少.逻辑简单,将写个系列文章来学习. SqlSession Mybatis的使用入口位于org.apache.ibatis.session包中的SqlSes ...

  8. Linux课堂笔记（一）

    一.Linux应用领域及版本介绍. 1.服务器.嵌入式.桌面应用等. (1)在服务器领域中,需要安全和稳定,特别是越老的内核版本越安全.越稳定. (2)Linux主要分内核版和发行版. 内核版本2.6 ...

  9. Linux网络驱动--snull

    snull是<Linux Device Drivers>中的一个网络驱动的例子.这里引用这个例子学习Linux网络驱动. 因为snull的源码,网上已经更新到适合最新内核,而我自己用的还是 ...

  10. How to accept Track changes in Microsoft Word 2010?

    "Track changes" is wonderful and remarkable tool of Microsoft Word 2010. The feature allow ...