結構

• 用select標籤做items，size的值給大一點讓item-box可以變長
• 已選取item的背景色要用線性漸層
• #mySelect.options[i] 可以回傳#mySelect的第i個選項
• #mySelect.selectedIndex可以回傳目前被選取的序列

table.item-picker
 tr
  th 未加入功能清單
  th
  th 已加入功能清單
 tr
  td
   select(size="6" name="source1").pick-list
    option(value="0") 平台資訊審核
    option(value="1") 手續費審核
    option(value="2") 使用者管理
    option(value="3") 角色管理
  td
   button.add →
   br
   button.delete ←
  td
   select(size="6" name="target1").pick-list
    option(value="4") 平台資訊設定
    option(value="5") 手續費設定
    option(value="6") 顧客約定管理

$dark: #439E96
$turquoise: #50BBB6
$light: #E7F2F1
$black: #596D6C
$gray: #CCE0DE

*
 // border: 1px solid #000

// .iten-picker
//  overflow: auto
 
.add,.deduct
 display: block


 
table
 margin-top: 100px
 margin-right: auto
 margin-left: auto
 text-align: center
 
th
 color: $turquoise
 font-size: 16px
td
 select
  width: 150px
  font-size: 14px
  color: $black
  border-radius: 3px
  border-style: dashed
  &:focus
   outline: none
   box-shadow: 0px 1px 10px 0px #cce0de
  option
   padding: 2px 10px
   transition: color 0.5s
   &:checked
    background: $gray linear-gradient(0deg, $gray 0%, $gray 100%)
   &:hover
    color: $turquoise
  &:focus
   option
    &:checked
     background: $turquoise linear-gradient($turquoise 0%, $turquoise 100%)
     color: #fff
    
button
 transition-duration: 0.5s
 height: 30px
 width: 30px
 border-radius: 100%
 text-align: center
 border-color: $gray
 color: $turquoise
 outline: none
 
 &:hover
  background-color: $turquoise
  color: #fff
  border-color: $turquoise

const sourceItem=document.querySelector("select[name='source1']");
const targetItem=document.querySelector("select[name='target1']");
const addbtn=document.querySelector(".add");
const deletebtn=document.querySelector(".delete");

addbtn.addEventListener("click", function(){
 const theItem=sourceItem.options[sourceItem.selectedIndex]
 if(theItem){
  sourceItem.removeChild(theItem);
  targetItem.appendChild(theItem);
 }
 
});

deletebtn.addEventListener("click", function(){
 // targetItem.focus();
 const theItem=targetItem.options[targetItem.selectedIndex]
 if(theItem){
   targetItem.removeChild(theItem);
   sourceItem.appendChild(theItem);
 }

 
});

Display

CODEPEN