複数選択セレクトボックスをシンプルなJavascriptで使いやすくする

multiple属性を設定し複数選択を許可したセレクトボックスでは、長いリストから複数の選択をさせることができます。ユーザーはCTRLキーを押しながらクリックすることで選択が可能です。しかし、選択対象のリストが長くなると、既に選択した項目が何なのかを把握することが難しくなってしまいます。
そこで、選択中の選択肢を分かりやすく表示してやることで使いやすく出来ます。

生ビール（中） 瓶ビール（中） ウィスキー 日本酒 グラスワイン（赤・白） カクテル 梅酒 焼酎 ジュース コカ・コーラ ジンジャーエール ウーロン茶 付きだし 枝豆 だしまき 浅漬け盛り合せ 造り盛り合せ ポテトフライ 若鳥の唐揚 串揚げ 天ぷら盛り合せ 串焼き あさりバター焼 牛すじどて焼 やきそば 豚平焼 焼きおにぎり

オーダー：

複数選択のセレクトボックスとdivを用意し、以下のようにJavascriptを使って接続してやれば、選択中の状況を表示させることができます。

document.getElementById("menulist").onclick = function() {
  var sel = document.getElementById("menulist");
  var arr = [];
  for (var i = 0; i < sel.length; i++) {if (sel[i].selected) { arr.push(sel[i].text);}}
  document.getElementById("orderlist").innerHTML = "オーダー:<br />" + arr.join("<br />");
}
document.getElementById("resetbutton").onclick = function() {
  var sel = document.getElementById("menulist");
  for (var i = 0; i < sel.length; i++) {sel[i].selected = false}
  document.getElementById("orderlist").innerHTML = "オーダー:"
}