Framework7 - 智慧選擇

智慧選擇佈局使用 smart-select 類在 select 元素內定義列表檢視。

智慧選擇透過使用 搜尋欄 搜尋元素，並透過將 data-searchbar 類設定為 true 來啟用它。

您可以使用 data-page-title 和 data-back-text 屬性設定智慧選擇的自定義頁面標題和返回連結。

智慧選擇可以透過使用 data-open-in 屬性設定為 popup 來作為彈出視窗開啟。

透過將 data-open-in 屬性設定為 picker，可以將智慧選擇顯示為選擇器模態。

您可以分別使用 data-option-icon、data-option-color 和 data-option-image 屬性在智慧選擇上定義自定義圖示、顏色或影像。

智慧選擇允許使用 multiple 和 optgroup 屬性來使用多選和分組選項。

智慧選擇允許使用 maxlength 屬性選擇有限數量的專案。

在使用者選擇時關閉智慧選擇

當用戶選擇任何選項時，您可以關閉智慧選擇。

帶有虛擬列表的智慧選擇

如果您有很多選項，則虛擬列表可以與智慧選擇一起使用。

智慧選擇顏色主題

您可以為智慧選擇頁面上的表單和導航欄指定顏色主題。

data-form-theme = "color"

data-navbar-theme = "color"

透過選項文字設定智慧選擇值

智慧選擇的值可以透過使用選項值來設定。

使用 JavaScript 開啟智慧選擇

您可以使用 JavaScript 方法開啟智慧選擇。

myApp.smartSelectOpen (smartSelect)

• smartSelect - 它是要開啟的指定智慧選擇的 HTMLElement 或字串引數。

動態新增選項

即使智慧選擇已開啟，您也可以動態向其中新增選項。

myApp.smartSelectAddOption (select, optionHTML, index)

• smartSelect - 它是要開啟的指定智慧選擇的 HTMLElement 或字串引數。

• optionHTML - 它是必需的字串元素，可用於新增 HTML 選項。

• index - 它指定新選項的索引號。