22 Select2 多选框问题

来源：互联网发布：神硕微营销软件怎么样编辑：程序博客网时间：2024/05/01 19:02

下面两个弹出框, 对应于一个实体的增加, 删除, 二者是通过弹出层框架弹出来的
----------------------------------------------------------------------------------------------------
1). add

<div class="control-group" name="entityList" style="display:none" width="100px" ><label class="control-label">xx列表</label><div class="controls"><select class="select show-tick form-control" multiple name="entities" ><option value="${code1}" >${name2}</option><option value="${code1}" >${name2}</option></select></div></div>

2). update

<div class="control-group" name="entityList" style="display:none" ><label class="control-label">xx列表</label><div class="controls"><select class="select show-tick form-control" multiple name="entities" ><option value="${code1}" >${name2}</option><option value="${code1}" >${name2}</option></select></div></div>

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

1. 首先最开始是这样, 然后没有其他的js脚本
出现的问题是增加的多选框是正确的样式, 然后更新的多选框样式就变了[少了样式, 变得不够美观, 但是其功能特性还在]

出现问题之后, 我就拿出了文本比较工具, 来比较两个form[包含上面的多选框代码片]的不同之处, 发现二者没有什么不同的, 然后做了一些其他的尝试啊[删除掉增加的弹出框中的这个select, 等等]什么的, 都没有见效
然后找了一下前端的朋友, 来瞅瞅这个问题, 因为问题比较奇葩, 因此建议我重新找一个框架, 然后我也准备重新找一个了,

2. 但是今天早上来的时候, 看了一下昨天的一篇 Select2 的选择框的demo [http://www.tuicool.com/articles/nYVn22e] 然后准备按照这个来处理,
----------------------------------------------------------------------------------------------------
// 增加脚本处理样式
$("[name='entities']").select2({tags: true});
----------------------------------------------------------------------------------------------------
然后我把 "layero.find("[name='entities']").select2({tags: true});" 放在了 xx.js 的顶层[顶层, 还有require.js的导入, 还有其他的弹出层相关业务的处理]
结果放在这里, 两个都gg了,
然后后来想了一下, 才是弹出框的相关东西是动态加载加载进来的, 然后我又放在了 xx.js 的顶层, 然后当时 dom 中还没有对应的节点, 因此找不到, 没有达到预期的效果
然后我把加载的代码放在了弹出层的回调的逻辑中了, 这个问题差不多就是这样解决了

然后至于为什么在情况一的时候会加载对应的样式呢 ?
弹出之前根本找不到这个节点啊 ??
xx.js, require 导入了一个 selectInit 的js了, "$('select.select').each(function(){$(this).select2();})", 和这个有什么关系吗?
为什么第一个加载了样式, 然后第二个没有加载对应的样式呢 ?

算了, 奇葩问题先抛在这里吧,

对了, 还有一个小问题, 我在选择框中搜索的时候, 输入了一个多选框中不存在的选项, 然后回车了一下, 这个选项居然选中了,
问题是在于这个 tag 选项, tag 文档介绍如下
----------------------------------------------------------------------------------------------------
Tagging support

Select2 can be used to quickly set up fields used for tagging.
Note that when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.
----------------------------------------------------------------------------------------------------

附上部分测试代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>    <meta name="viewport"          content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>    <meta name="format-detection" content="telephone=no, email=no"/>    <meta name="renderer" content="webkit">    <title>Select2 多选框问题</title>    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"          crossorigin="anonymous">    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script></head><body><select name="multiSelect" multiple="multiple" class="form-control">    <optgroup label="系统设置">        <option value="1">用户管理</option>        <option value="2">角色管理</option>        <option value="3">部门管理</option>        <option value="4">菜单管理</option>    </optgroup>    <optgroup label="基础数据">        <option value="9">基础数据维护</option>    </optgroup></select><hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /><select name="multiSelect" multiple="multiple" class="form-control">    <option value="1">用户管理</option>    <option value="2">角色管理</option>    <option value="3">部门管理</option>    <option value="4">菜单管理</option>    <option value="9">基础数据维护</option></select><hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /><select multiple="multiple" class="select2 show-tick form-control">    <option value="1">用户管理</option>    <option value="2">角色管理</option>    <option value="3">部门管理</option>    <option value="4">菜单管理</option>    <option value="9">基础数据维护</option></select><script type="text/javascript">    // 渲染所有的 select    //    $('select').select2();    // 单独使用配置指定的 节点    $("[name='multiSelect']").select2({        tags: true,        maximumSelectionLength: 3  //最多能够选择的个数    });</script></body></html>

参考链接 :
http://select2.github.io/examples.html
http://www.tuicool.com/articles/nYVn22e
http://www.cnblogs.com/zhansu/p/5817250.html
http://blog.csdn.net/u010265663/article/details/50421858
http://www.cnblogs.com/SHMILYHP/p/6245041.html

阅读全文

0 0