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. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  2. C++对C的函数拓展

    一,内联函数 1.内联函数的概念 C++中的const常量可以用来代替宏常数的定义,例如:用const int a = 10来替换# define a 10.那么C++中是否有什么解决方案来替代宏代码 ...

  3. 微软.NET Core RC2正式发布，横跨所有平台

    .NET官方博客宣布了<Announcing .NET Core RC2 and .NET Core SDK Preview 1>,正式如期发布了.NET Core RC2, 现在可以放心 ...

  4. ABP文档 - 本地化

    文档目录 本节内容: 简介 应用语言 本地化源 XML文件 注册XML本地化源 JSOn文件 注册JSON本地化源 资源文件 自定义源 获取一个本地文本 在服务端 在MVc控制器里 在MVC视图里 在 ...

  5. 【Reading Note】算法读书杂记

    1 排序 排序基本信息 稳定性:排序前大的数在排序后,大的数依然保持不变就是稳定排序,反之不稳定 内外排序:根据待排序的记录是否放在内存里面区分的.诸如:插入排序(直接插入&希尔).交换排序( ...

  6. 如何优化coding

    如何优化coding 前言 最近一直在做修改bug工作,修改bug花费时间最多的不是如何解决问题而是怎样快速读懂代码.如果代码写的好的,不用debug就可以一眼看出来哪里出了问题.实际上,我都要deb ...

  7. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

  8. css_02之盒模型、渐变

    1.框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width:②对象实际高度=上下外边距+上下边框+上下内边距 + height: 2.外边距:margin:取值:①top(上 ...

  9. Microsoft Visual Studio 2017 for Mac Preview 下载+安装+案例Demo

    目录: 0. 前言 1. 在线安装器 2. 安装VS 3. HelloWorld 4. ASP.NET MVC 5. 软件下载 6. 结尾 0. 前言: 工作原因,上下班背着我的雷神,一个月瘦了10斤 ...

  10. 在centos7（EL7.3 即 kernel-3.10.0-514.X ）上安装BCM4312无线网卡驱动要注意的问题

    我新装的centos7主机无法使用里面自带的网卡,查询后发现网卡型号为BCM4312.我在看资料安装的过程中遇到了些问题,纠结了好久,现在分享下要注意的点,为后来的遇到同样问题的人提供点帮助.现在开始 ...