结合网友给的参考案例 https://blog.csdn.net/qinshijangshan/article/details/80179602
我自己写了个左右互选的组件
原作者的JS开发能力还是比我要高的；
我的代码如下，留个纪念吧。
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <th:block th:include="include :: header('左右互选组件')" />
5 <th:block th:include="include :: bootstrap-duallistbox-css" />
6 </head>
7 <body class="gray-bg">
8 <div class="wrapper wrapper-content animated fadeInRight">
9 <div class="row">
10 <div class="col-md-6">
11 <div class="ibox">
12 <div class="ibox-title">
13 <h5>双重列表框 </h5>
14 </div>
15 <div class="ibox-content">
16 <p>
17 Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
18 </p>
19
20 <form id="form" action="#" class="wizard-big">
21 <select id="stockcode" name="stockcode" multiple="multiple" >
22
23 </select>
24
25
26
27 </form>
28 <hr>
29 <div class="form-group">
30 <label class="font-noraml">相关参数详细信息</label>
31 <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox</a></div>
32 </div>
33 </div>
34 </div>
35 </div>
36 </div>
37 </div>
38 <th:block th:include="include :: footer" />
39 <th:block th:include="include :: bootstrap-duallistbox-js" />
40 <th:block th:include="include :: bootstrap-duallistbox-css" />
41 <th:block th:include="include :: bootstrap-select-js" />
42 <th:block th:include="include :: bootstrap-select-css" />
43 <script type="text/javascript">
44
45 var prefix = ctx + "stock/code/";
46 var deviceStr="" ;
47
48
49
50
51 $('.dual_select')
52 .bootstrapDualListbox({
53 nonSelectedListLabel: '未添加',
54 selectedListLabel: '已添加',
55 preserveSelectionOnMove: 'moved',
56 moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
57 filterTextClear: '展示所有',
58 moveSelectedLabel: "添加",
59 moveAllLabel: '添加所有',
60 removeSelectedLabel: "移除",
61 removeAllLabel: '移除所有',
62 infoText: '共{0}个',
63 showFilterInputs: true, // 是否带搜索
64 selectorMinimalHeight: 160,
65 filterPlaceHolder:'查询条件'
66
67 });
68
69
70
71
72 $(function() {
73 var requestUrl = prefix+"selectStockCode";
74 var reqeustParams = "";//有参数用json格式
75 var selectElement = "#stockcode";
76 var selectedDataStr = "sh600004,sh600006,sh600007";//选中的option（用过英文逗号隔开；新增时，无选中option）
77 //初始化duallistbox
78 initListBox(requestUrl, reqeustParams, selectElement, 'code', 'name', selectedDataStr);
79 });
80
81
82
83
84
85 function initListBox(url,reqeustParams,selectElement,optionValue,optionText, selectedDataStr) {
86 $.ajax({
87 type: 'GET',//请求方式
88 url: url,//地址，就是json文件的请求路径
89 data: reqeustParams,//请求参数
90 async: true,//是否异步
91 success: function (data) {
92 //var objs = $.parseJSON(data);
93 var objs = data ;
94 var selector = $(selectElement)[0];
95 $(objs).each(function () {
96 var o = document.createElement("option");
97 o.value = this[optionValue];
98 o.text = this[optionText];
99 if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
100 var selectedDataArray = selectedDataStr.split(',');
101 $.each(selectedDataArray, function (i, val) {
102 if (o.value == val) {
103 o.selected = 'selected';
104 return false;
105 }
106 });
107 }
108 if(typeof(selector) != "undefined") {
109 selector.options.add(o);
110 }
111 });
112
113 //渲染dualListbox
114 $(selectElement).bootstrapDualListbox({
115 moveOnSelect: false,
116 preserveSelectionOnMove: 'all',
117 nonSelectedListLabel: 'Non-selected',
118 selectedListLabel: 'Selected',
119 selectorMinimalHeight: 200,
120 });
121 },
122 error: function (e) {
123 alert(e.msg);
124 }
125 });
126 }
127
128
129
130
131 </script>
132 </body>
133 </html>
<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('左右互选组件')" />
<th:block th:include="include :: bootstrap-duallistbox-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-md-6">
<div class="ibox">
<div class="ibox-title">
<h5>双重列表框 </h5>
</div>
<div class="ibox-content">
<p>
Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
</p>
<form id="form" action="#" class="wizard-big">
<select id="stockcode" name="stockcode" multiple="multiple" >
</select>
</form>
<hr>
<div class="form-group">
<label class="font-noraml">相关参数详细信息</label>
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-duallistbox-js" />
<th:block th:include="include :: bootstrap-duallistbox-css" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: bootstrap-select-css" />
<script type="text/javascript">
var prefix = ctx + "stock/code/";
var deviceStr="" ;
$('.dual_select')
.bootstrapDualListbox({
nonSelectedListLabel: '未添加',
selectedListLabel: '已添加',
preserveSelectionOnMove: 'moved',
moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
filterTextClear: '展示所有',
moveSelectedLabel: "添加",
moveAllLabel: '添加所有',
removeSelectedLabel: "移除",
removeAllLabel: '移除所有',
infoText: '共{0}个',
showFilterInputs: true, // 是否带搜索
selectorMinimalHeight: 160,
filterPlaceHolder:'查询条件'
});
$(function() {
var requestUrl = prefix+"selectStockCode";
var reqeustParams = "";//有参数用json格式
var selectElement = "#stockcode";
var selectedDataStr = "sh600004,sh600006,sh600007";//选中的option（用过英文逗号隔开；新增时，无选中option）
//初始化duallistbox
initListBox(requestUrl, reqeustParams, selectElement, 'code', 'name', selectedDataStr);
});
function initListBox(url,reqeustParams,selectElement,optionValue,optionText, selectedDataStr) {
$.ajax({
type: 'GET',//请求方式
url: url,//地址，就是json文件的请求路径
data: reqeustParams,//请求参数
async: true,//是否异步
success: function (data) {
//var objs = $.parseJSON(data);
var objs = data ;
var selector = $(selectElement)[0];
$(objs).each(function () {
var o = document.createElement("option");
o.value = this[optionValue];
o.text = this[optionText];
if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
var selectedDataArray = selectedDataStr.split(',');
$.each(selectedDataArray, function (i, val) {
if (o.value == val) {
o.selected = 'selected';
return false;
}
});
}
if(typeof(selector) != "undefined") {
selector.options.add(o);
}
});
//渲染dualListbox
$(selectElement).bootstrapDualListbox({
moveOnSelect: false,
preserveSelectionOnMove: 'all',
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
selectorMinimalHeight: 200,
});
},
error: function (e) {
alert(e.msg);
}
});
}
</script>
</body>
</html>