<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>風(fēng)鷹鎧甲</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">
? ? ? ? //聲明兩個(gè)數(shù)組
? ? ? ? var str = [],
? ? ? ? ? ? strs = [];
? ? ? ? //第一個(gè)數(shù)組等于select的內(nèi)容? ? ? 然后截取
? ? ? ? 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>
