kselect.js

<link rel="stylesheet" href="kselect.css">
<script src="kselect.js"></script>

const Kselect = require('./kselect.js');

<select id="my-select">
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="go">Go</option>
</select>

<script>
  const [ks] = Kselect.init('#my-select');
</script>

Kselect.init('select'); // all selects
Kselect.init('.enhanced'); // selects with a specific class

Kselect.init('#my-select', {
  placeholder:       'Choose an option…',
  searchPlaceholder: 'Search…',
  noResultsText:     'No results found',
  maxHeight:         300,
  searchable:        true,
  allowClear:        true,
  closeOnSelect:     true,
});

<select
  data-placeholder="Pick a country…"
  data-search-placeholder="Filter countries…"
>
  …
</select>

const selectEl = document.getElementById('my-select');
const ks = Kselect.getInstance(selectEl);

<select id="country" data-placeholder="Choose a country…">
  <option value=""></option>
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

<script>
  const [ks] = Kselect.init('#country');

  // Read the current value
  ks.getValue(); // → 'us'  (string, or null if nothing selected)
</script>

Kselect.init('#country', { closeOnSelect: false });

<select id="fruits" multiple data-placeholder="Pick some fruits…">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="mango">Mango</option>
</select>

<script>
  const [ks] = Kselect.init('#fruits');

  // Read all selected values
  ks.getValue(); // → ['apple', 'cherry']  (always an array in multi mode)

  // Set multiple values at once
  ks.setValue(['banana', 'mango']);
</script>

<select id="languages" multiple>
  <optgroup label="Web">
    <option value="js">JavaScript</option>
    <option value="ts">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="go">Go</option>
    <option value="rust">Rust</option>
  </optgroup>
</select>

<script>
  // Groups start expanded (default)
  Kselect.init('#languages');

  // Groups start collapsed
  Kselect.init('#languages', { collapseGroups: true });
</script>

Kselect.init('#my-select', {
  selectAll:     true,
  selectAllText: 'Select all', // optional label
});

Kselect.init('#permissions', {
  selectAll:          true,
  selectAllGroups:    true,
  selectAllGroupText: 'Select all', // accessible label for group checkboxes
});

Kselect.init('#my-select', {
  searchable:        false,
  noResultsText:     'No results found', // shown when search matches nothing
  searchPlaceholder: 'Type to filter…',
});

<select id="my-select" disabled>…</select>

ks.disable();
ks.enable();

<select id="plan">
  <option value="free">Free</option>
  <option value="pro" disabled>Pro (unavailable)</option>
  <option value="enterprise">Enterprise</option>
</select>

const [ks] = Kselect.init('#my-select');
const selectEl = document.getElementById('my-select');

// Later, after an AJAX response adds new options:
const opt = document.createElement('option');
opt.value = 'rust';
opt.text  = 'Rust';
selectEl.appendChild(opt);

// Option 1: call refresh() on the instance
ks.refresh();

// Option 2: dispatch the sync event
selectEl.dispatchEvent(new Event('kselect:sync'));

selectEl.innerHTML = `
  <option value="a">Alpha</option>
  <option value="b">Beta</option>
`;
ks.refresh(); // rebuild from new DOM state

Kselect.init('#my-select', {
  nativeOnMobile: true,
});

// The full API still works in native mode:
ks.getValue(); // reads from the native <select>
ks.setValue('go');  // writes to the native <select>
ks.disable();       // disables the native <select>

const [ks] = Kselect.init('#my-select');
const el = document.getElementById('my-select');

el.addEventListener('kselect:change', () => {
  console.log('Selected:', ks.getValue());
});

el.addEventListener('kselect:open', () => {
  console.log('Dropdown opened');
});

// Trigger a rebuild after external DOM changes:
el.dispatchEvent(new Event('kselect:sync'));

.my-green-theme {
  --ks-color-border-focus:       #10b981;
  --ks-color-option-selected:    #10b981;
  --ks-color-option-selected-bg: #ecfdf5;
  --ks-color-option-selected-fg: #059669;
  --ks-color-tag-bg:             #ecfdf5;
  --ks-color-tag-text:           #059669;
  --ks-color-tag-border:         #a7f3d0;
  --ks-color-checkbox-checked:   #10b981;
  --ks-color-arrow-open:         #10b981;
}

<div class="my-green-theme">
  <select id="tags" multiple>…</select>
</div>

:root {
  --ks-color-border-focus:    #0ea5e9;
  --ks-color-option-selected: #0ea5e9;
  --ks-radius-control:        4px;
  --ks-radius-dropdown:       4px;
}

.theme-dark {
  --ks-color-bg:                  #1e1e2e;
  --ks-color-border:              #313244;
  --ks-color-border-focus:        #cba6f7;
  --ks-color-text:                #cdd6f4;
  --ks-color-placeholder:         #6c7086;
  --ks-color-option-hover:        #313244;
  --ks-color-option-selected:     #cba6f7;
  --ks-color-option-selected-text:#1e1e2e;
  --ks-color-tag-bg:              #313244;
  --ks-color-tag-text:            #cba6f7;
  --ks-color-tag-border:          #45475a;
  --ks-shadow-dropdown:           0 4px 20px rgba(0,0,0,.5);
}