22/01 Select2 多选框问题_js select2插件多选选中之后为什么多一次请求

作者：羊村懒王 | 2024-02-28 03:38:26

踩

js select2插件多选选中之后为什么多一次请求

下面两个弹出框, 对应于一个实体的增加, 删除, 二者是通过弹出层框架弹出来的
----------------------------------------------------------------------------------------------------
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/157495

22/01 Select2 多选框问题_js select2插件 多选选中之后为什么多一次请求

22/01 Select2 多选框问题_js select2插件多选选中之后为什么多一次请求