<style type="text/css">
a,
.c {
float: left;
width: 130px;
}
select {
width: 120px;
height: 120px;
font-size: 17px;
}
.b {
float: left;
width: 80px;
line-height: 30px;
}
</style>
<body>
<div class="a">
<select id="unsel" name="" multiple>
<option>炎龙铠甲</option>
<option>风鹰铠甲</option>
<option>地虎铠甲</option>
<option>黑犀铠甲</option>
<option>雪獒铠甲</option>
<option>刑天铠甲</option>
<option>飞影铠甲</option>
<option>金刚铠甲</option>
<option>帝皇铠甲</option>
<option>雅塔莱斯</option>
</select>
</div>
<div class="b">
<button onclick="fn(this)">全军出击</button>
<button onclick="fn(this)">合体</button>
<button onclick="fn(this)">解体</button>
<button onclick="fn(this)">全体撤退</button>
</div>
<div class="c">
<select id="unsel2" name="" multiple>
</select>
</div>
<script type="text/javascript">
//声明两个数组
var str = [],
strs = [];
//第一个数组等于select的内容 然后截取
str = unsel.innerHTML.slice(13, -13).split(/<\/option>\s*<option>/);
console.log(str);
function fn(btn) {
switch(btn.innerHTML) {
case '全军出击':
strs = strs.concat(str);
str = [];
break;
case '全体撤退':
str = str.concat(strs);
strs = [];
break;
case '合体':
var opt=document.querySelectorAll('#unsel option')
for(i=0;i<opt.length;i++){
if(opt[i].selected){
strs.push(str.splice(i,1));
strs.sort();
}
}
break;
case '解体':
var opt=document.querySelectorAll('#unsel2 option')
for(i=0;i<opt.length;i++){
if(opt[i].selected){
str.push(strs.splice(i,1));
str.sort();
}
}
break;
}
update(str, unsel);
update(strs, unsel2);
}
function update(arr, sel) {
sel.innerHTML = '<option>' + arr.join('</option><option>') + '</option>';
}
</script>
