select2 多选 排序(版本3.4.6)
使用select2多选,页面选择值的顺序与传到control的值的顺序不一致,为了方便,没有改变本来js文件,在页面上面通过change方法改变。
1、页面代码(添加修改使用同一个页面)
<link rel="stylesheet" href="/js/select2/select2.css"/>
<script src="/js/jquery.min.js"></script>
<script src="/js/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bData = [];
var bselect = $("#bIds").select2(bData);
$("#bIds").change(function(){
$(this).children('option:selected').each(function (index, domEle) {
var vv=$("#bookIds option[value='"+domEle.value+"']").val();
if (vv=='undefined' ) {
var option = $("<option>").val(domEle.value).attr("selected","true");
$("#bookIds").append(option);
}
});
$(this).children('option:not(:selected)').each(function (index, domEle) {
$("#bookIds option[value='"+domEle.value+"']").remove();
});
});
<#if action =='edit'>
var bmdata = [];
<#list entity.bookList as m>
bmdata.push({id:${m.id}, text: '${m.bookName}'});
$("#bookIds").append($("<option>").val(${m.id}).attr("selected","true"));
</#list>
bselect.select2("data", bmdata);
</#if>
</script>
<body>
<select id="bIds" multiple="multiple" class="select" >
<#list bookList as m>
<option value="${m.id}">${m.bookName}</option>
</#list>
</select>
<select id="bookIds" multiple="multiple" style="display: none;">
</select>
</body>
select2 多选 排序(版本3.4.6)的更多相关文章
- select2多选设置select多选,select2取值和赋值
select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给sel ...
- select2多选框初始化默认值和获得值
select2多选自带手动输入搜索功能,可怜我还查寻半天api 获得值: //chang函数获取选择的option $(".js-example").change(function ...
- laravel中select2多选,初始化默认选中项
项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人.使用 select2 插件来完成. select2 的 html 代码如下: <div class="form-group ...
- CheckBoxList 全选(jquery版本)
function selectedAll(allselect, obj) { $("#"+obj.id+" input:checkbox").each(func ...
- select2 多选设置默认值
Select2 version 4.0.3 https://select2.github.io <select id="slroles" ng-model=" ...
- select2多选
在TCX_1710项目中的拒绝代码配置页面可以选择多个拒绝字段,效果图如下 代码中需要注意的有以下地方:图1为提交保存时对多选数据的获取,图2为修改是对多选数据的回显 对于多选框宽度太窄的问题,可以参 ...
- 【学亮IT手记】angularJS+select2多选下拉框实例
永远保持对大部分知识的好奇心,学习从不枯燥,也没有被逼学习一说,乐此不疲才是该有的心态和境界!!! 引入相关js库: html部分代码: angularJS定义数据源变量:
- jQuery的下拉选select2插件用法
1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
随机推荐
- 插入外置网卡端口顺序混乱--linux系统
本文皆是作者工作学习中的理解或感悟,欢迎大家提出问题,一起讨论!! 一.问题提出 一般的主板上都带有两个网卡接口,linux系统启动后一般命名为eth0,eth1,当然如果我们不对eth0与eth1进 ...
- 纯C语言跑分(详细注释)
#include <stdio.h> #include <time.h>//clock()所属头文件 ;//快排的数据规模 ,N=;//整点.浮点运算的规模 ;//计算圆周率的 ...
- Git与Github。
Git是一款免费,开源的分布是版本,用于敏捷高效的处理任何或小或大的项目.分布式相对于集中式的最大区别在于开发者可以提到本地,每个开发者通过克隆,在本地磁盘内拷贝一个完整的GIt仓库. Git的功能特 ...
- F5 IIS Log获取客户端源IP
1.配置F5启用X-Forwarded-For方法: 1:Local Traffic-Profiles-Http-改"Insert XForwarded For"为Enable 2 ...
- HDU4578 线段树(区间更新 + 多种操作)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 , 线段树的区间更新 + 多种操作,好题. 虽然是比较裸的线段树,但是比较麻烦,并且有很多细节 ...
- java查找字符串里与指定字符串相同的个数
public class EmployeeDemo { //方法一: public int search(String str,String strRes) {//查找字符串里与指定字符串相同的个数 ...
- c++ 派生类的复制函数次序,及子父类兼容性
#include <iostream> using namespace std; class CFatherSum //父类Sum { public: CFatherSum(){cout& ...
- MySQL查询时强制区分大写和小写
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zyb_icanplay7/article/details/24981791 平时非常少会考虑数据存储 ...
- 把对象缓存到HttpRuntime.Cache里,你能安全地使用它吗?
每每勤勤恳恳,思来想去,趁还有激情,先把它记录下来... 定义一个Stu的类: public class Stu { public string Name { get; set; } public i ...
- Django中模型(四)
Django中模型(四) 五.创建对象 1.目的 向数据库中添加数据.当创建对象时,Django不会对数据库进行读写操作,当调用save()方法时,才与数据库交互,将对象保存到数据库中 2.注意 __ ...