December 10, 2014

複数選択セレクトボックスをシンプルな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 = "オーダー:"
}

No comments :

Post a Comment