<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">
? ? ? ? //聲明兩個數(shù)組
? ? ? ? var str = [],
? ? ? ? ? ? strs = [];
? ? ? ? //第一個數(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>
2018.8.9
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
