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 ...
随机推荐
- Hive、Spark SQL、Impala比较
Hive.Spark SQL.Impala比较 Hive.Spark SQL和Impala三种分布式SQL查询引擎都是SQL-on-Hadoop解决方案,但又各有特点.前面已经讨论了Hi ...
- linux shell实现守护进程 看门狗 脚本
嵌入式初学者,第一次上传代码.昨天做了一个udhcpd与udhcpc的守护,目前只会用shell模仿编写,还有什么方法可以做守护呢? ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
- BaseActivity合集
1.出自“高仿京东商城”: package com.itau.jingdong.ui.base; import com.itau.jingdong.AppManager; import com.ita ...
- python 网络 socket
---恢复内容开始--- 1.socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏 ...
- Android设备网络压力测试
网络测试的几个维度: 网络的性能 带宽:通过TCP测试来量度 时延:用ping命令量度 数据报丢失:用Iperf UDP测试来量度 Jitter(延时变化):用Iperf UDP测试来量度 信号强度( ...
- Scratch3.0——克隆代码仓库的正确姿势
原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603450 对Scratch3.0进行二次开发,首先要在github上fock官方代 ...
- Win10 mysql容器启动命令
docker run --name mysql -it -p : -e MYSQL_ROOT_PASSWORD=Hongfund5013 -e MYSQL_USER=hongfund_os -e MY ...
- ISA 连接非443端口的https站点提示错误
ISA 连接非443端口的https站点提示错误:12204 The specified Secure Sockets Layer (SSL) port is not allowed. ISA Ser ...
- Qt Mysql驱动编译过程
1.首先当然是要有VS2008+Qt4.7的开发环境. 2.安装MySQL,最好是4以后的版本,安装MySQL时要勾住“C Include Files 和 Lib Files”选项,这样才能装上MyS ...
- 乘风破浪:LeetCode真题_004_Median of Two Sorted Arrays
乘风破浪:LeetCode真题_004_Median of Two Sorted Arrays 一.前言 说到算法,最难的就是一些需要通过分析得到一些递推公式或者有用的结论,进而用来解决问题的方法了. ...