SelectElementFactory

SelectElementFactory Builds <select> fields, including ones whose options are fetched from an endpoint. Handles option groups, a placeholder option, type-to-filter, and an optional response cache keyed by URL plus query parameters.

หน้านี้สร้างจากซอร์สโดยตรงเมื่อ 2026-08-21 คำอธิบายมาจาก JSDoc ในไฟล์
รันซ้ำได้ด้วย docs_scaffold เมื่อโค้ดเปลี่ยน อย่าแก้ด้วยมือถ้าตั้งใจให้ generate ต่อ

ที่มา

• ไฟล์: Now/js/SelectElementFactory.js (1129 บรรทัด)
• รูปแบบ: ES class

เมธอดสาธารณะ (20)

static cleanup(instance)

Tear the select down and release its handlers.

static clearOptions(element, keepPlaceholder = true)

Remove a select's options. The placeholder is identified by data-placeholder="true" and kept by default, so reloading options does not leave the field with nothing to show while the request is in flight.

static create(def)

Build a select element from a field definition.

static createCacheKey(url, params = {})

Build the cache key for an options request. Query parameters are folded into the key, so the same endpoint called with different filters does not share a cached list.

static createOptGroups(element, groups)

Render grouped options as <optgroup> elements. Beyond 50 groups the nodes are built in a DocumentFragment first, so the select is touched once instead of per group.

static createOption(parent, opt)

Create one <option> and append it. The label falls back through text, label, name and finally the value, so option records from different APIs all render sensibly.

static customValidateValue(value, valueChange)

Validate the selection, accounting for multiple selects. A multiple select is judged on how many options are chosen rather than on a single value string.

static extractCustomConfig(element, def, dataset)

Read the select options a single element declares. size is resolved in a fixed order — the definition wins, then data-size, then the element's own size attribute, then the default.

static getCachedResponse(cacheKey)

Read a cached options response, dropping it if it has expired.

static hasOptGroups(options)

Whether an option list is grouped.

static async loadOptions(instance, url, params = {}, requestOptions = {})

Fetch options from an endpoint and render them. The cache is consulted only when config.cache is on and the caller did not pass force: true.

static normalizeCacheTime(value, fallback = 60000)

Coerce a cache lifetime into a usable number of milliseconds.

static populateFromOptions(element, optionsData, optionsKey)

Populate select element from provided options object Used when options are provided by modal response or parent context

static populateFromOptionsInContainer(container, optionsData)

Populate all select elements with data-options-key attribute from provided options object

static setCachedResponse(cacheKey, data, cacheTime)

Store an options response with an expiry time.

static setupChangeHandler(instance)

Bind the change handler through EventSystemManager. Registering centrally rather than with addEventListener means teardown removes the handler along with the element's other listeners.

static setupElement(instance)

Prepare a select, remembering the value it started with. The initial value is taken from element.value, then data-value, then empty — captured before options are replaced so a value loaded from the server can be re-selected once its option exists.

static setupEventListeners(instance)

Bind the select's event handlers.

static setupTypeToFilter(instance)

Let the user jump to an option by typing. Keystrokes accumulate into a search term that resets after a pause, so typing several letters quickly matches a whole word rather than only the last character.

static updateOptions(element, options, useOptGroups = false, placeholder = null)

Replace a select's options, preserving the current selection. The value is captured from value, the value attribute or data-value before the rebuild and re-applied afterwards, handling both single and multiple selects.

Data attribute ที่ใช้

data-aria-i18n · data-i18n · data-multiple · data-options-key · data-placeholder · data-size · data-use-opt-groups · data-value

พึ่งพาคลาสอื่น

ElementFactory · ElementManager · ErrorManager · EventManager · EventSystemManager · NotificationManager · Utils

เหตุการณ์

เหตุการณ์นี้เป็น DOM CustomEvent ที่ dispatch บนอีลิเมนต์ (bubbles) รับด้วย
element.addEventListener() และอ่านค่าจาก event.detail