カテゴリー: vanilla

今までマルチセレクトについては、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()
    }