今までマルチセレクトについては、jQueryのMultipleSelect を使ってましたが、Bootstrap4で使うと表示が崩れる(多分CSSを変えれば直ると思いますが、調べる時間がないので)、VanillaSelectBoxを使ってみました。
ここで教えて頂きました。
< コード例 >
selectのプロパティに multiple を追加
/**
*
* @returns 空港クラス選択セレクトタグ
* multiple.select
*/
getClassTag (classes) {
const CLASSES = ["1", "2", "3", "4", "5"]
let html = `<select id='classsel' class='custom-select' multiple>`
//html += "<option value='0'>ALL</option>"
CLASSES.forEach((tmp, j) => {
const seled = classes.includes(tmp) ? " selected" : ""
html += `<option value="${tmp}" ${seled}>${tmp}</option>`
})
html += "</select>"
return html
}
マルチプルセレクトの設定
// マルチプルセレクト by vanillaSelectBox //
let gpsel = new vanillaSelectBox("#groupsel", {
maxWidth: 600,
maxHeight: 600,
minWidth: -1,
//selected: classes + "" <== これは出来ないので先にselectのoptionにセット
})
選択項目取得は、val()で配列がとれます。
// アドミンユーザーフィルター値配列取得 //
let filtervals = []
if (isAdmin) {
filtervals = $("#groupsel").val()
}