セレクトしたオプションを追加で違うボックスに表示するUI

Question

２つのボックスがあり、間に追加、削除のようなボタンがあり、左を選択した状態で追加をおせば右に追加され、右を選択した状態で削除を、おせば消えるようなものを実装したいと考えております。
表現がむずかしいのですが、エクセルでリボンを設定するような操作です。

選択、追加、削除、jqueryのような検索でもうまく見つけることができなかったのですが、端的な方法や有用なサイトがあればご教示願いたく存じます。
宜しくお願い致します。

【加筆】
ご指摘を頂きましたので、イメージとなるコードを記載させて頂きます。
selectを使用していますが、そもそもselectを使うべきかやjqueryを使うべきかも不明なため
的外れであれば、またご指摘を頂ければ幸いです。

イメージとしては、下記のHTMLでbox1で複数選択した状態のものをbutton1を押せば、box2の要素のoptionがapendされ
反対にbox2で複数選択した状態のものをbutton2を押せばbox2の要素のからoptionが削除されるようなものとなります。

私のJS（Jquery）の知識では例えば、box1のoptionをクリックというイベントを通じて、
box2にoptionを追加したりすることはできるのですが、
1)複数の要素を選択した状態のものを変数に格納しておき、2)buttonをクリックするというイベントを通じてapendする
という2段階の方法に迷っています。
特に1)の場合、複数選択している状態というのをjquery上どのように検知する方法があるのかというのを探しております。

  <select name="entity1" id="box1" multiple>
   <option value="a">a</option>
   <option value="b">b</option>
   <option value="c">c</option>
    </select>

<button type="button" name="button" id="botton1">追加</button>
<button type="button" name="button" id="botton2">削除</button>

  <select name="entity2" id="box2" multiple>
    </select>

Comments

[yambejp]

ボックスの定義があいまいです。具体的なHTMLソースを書いて、どういう結果出力を期待しているかかくべき

[pegy]

コメントありがとうございます。加筆をさせて頂きました。

[yambejp]

box1から追加したoptionは２重登録していいのでしょうか？一度aを追加後再度aを追加できるか？追加作業によりboxのoptionの並びは追加した順でよいのでしょうか？それともbox1の並びが優先なのでしょうか？

Answer 1

仕様があやふやですが、ざっと書きます

<script>
document.addEventListener('click',function(e){
  var t=e.target;
  var box1=document.getElementById('box1');
  var box2=document.getElementById('box2');
  var opts1=box1.options;
  var opts2=box2.options;
  if(t.id=="botton1"){
    for(var i=0;i<opts1.length;i++){
      if(opts1[i].selected){
        var opt=document.createElement('option');
        opt.setAttribute("value",opts1[i].getAttribute("value"));
        opt.appendChild(document.createTextNode(opts1[i].textContent));
        box2.appendChild(opt);
      }
    }
  }
  if(t.id=="botton2"){
    for(var i=opts2.length-1;i>=0;i--){
      if(opts2[i].selected){
        box2.removeChild(opts2[i]);
      }
    }
  }
});
</script>

<select name="entity1" id="box1" multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

<button type="button" name="button" id="botton1">追加</button>
<button type="button" name="button" id="botton2">削除</button>

<select name="entity2" id="box2" multiple>
</select>

追記

一応jQuery版追記しておきます。さすがにスッキリ書けますね

$(function(){
  $('#botton1').on('click',function(){
    $('#box1 option:selected').clone().appendTo('#box2');
  });
  $('#botton2').on('click',function(){
    $('#box2 option:selected').remove();
  });
});

Comments

[yambejp]

一応例示の通りidはbuttonではなくbottonにしてありますが、必要に応じて読み替えて下さい

[pegy]

コメントまことに有難うございます。細かい仕様まで記載してしまえば、論点が曖昧になってしまうかと考えたため、端的な目的だけを記載したのですが、反対にお手間をかけてしまい申し訳ございません。
おそらく今回私にとってもっとも大きな気づきになったのはoptionがselected属性をとることが可能なため、イベントはbutton側だけで設定すれば足りるということでした。
ご記載頂いた、JS及びJqueryのコードでそれがよく分かりましたので大変助かりました。
また、ご丁寧にsampleまで記載をいただけたことを改めて御礼申し上げます。
宜しくお願い申し上げます。

Answer 2

ボックスとはリスト形式のセレクトボックスで問題ないでしょうか。

問題なければ、
追加：
1.セレクトボックス(左)のvalueと表示値を取得
2.セレクトボックス(右)に、1で取得したvalueと表示値を設定した、optionタグを追加

削除：
1.セレクトボックス(右)で選択状態になっているoptionタグを削除

セレクトボックスの操作方法は調べればわんさか出てくると思います。

Comments

[pegy]

ご回答ありがとうございます。
私の調べ方が良くなかったのかもしれません。buttonで追加削除するのを介在するケースをうまく見つけることができませんでした。もう一度検索してみます。