Programmatic API

Complete control of Vanilla Smart Select via JavaScript. Manipulate selections, add/remove options dynamically, control dropdown state and much more.

Single Select - Basic API

Result:
Click buttons to test...
View code

HTML

<select id="fruits">
  <option value="">Select a fruit...</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
</select>

JavaScript

// Create instance
const fruitsAPI = new VanillaSmartSelect('#fruits', {
  searchable: true
});

// Select by value
fruitsAPI.val('banana');

// Select by ID
fruitsAPI.select('apple');

// Clear selection
fruitsAPI.clear();

// Get current value
const value = fruitsAPI.val();

// Get complete selected item
const selected = fruitsAPI.getSelected();

Multi-Select - Add/Remove

Result:
Click buttons to test...
View code

HTML

<select id="languages" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="cpp">C++</option>
  <option value="rust">Rust</option>
</select>

JavaScript

// Multi-select
const languagesAPI = new VanillaSmartSelect('#languages', {
  multiple: true,
  searchable: true
});

// Adicionar à seleção
languagesAPI.select('js');

// Remover da seleção
languagesAPI.unselect('js');

// Obter todos os selecionados
const selected = languagesAPI.getSelected(); // Array

Dynamic Options

Result:
Click buttons to test...
View code

HTML

<select id="dynamic">
  <option value="">Select...</option>
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>

JavaScript

// Adicionar opção
dynamicAPI.addOption({
  id: 'new1',
  text: 'Nova Option'
});

// Remover opção
dynamicAPI.removeOption('opt2');

// Obter todos os dados
const data = dynamicAPI.data();

// Definir novos dados
dynamicAPI.data([
  { id: '1', text: 'Item 1' },
  { id: '2', text: 'Item 2' }
]);

State Control

View code

HTML

<select id="state">
  <option value="">Select...</option>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
</select>

JavaScript

// Controlar dropdown
stateAPI.open();
stateAPI.close();
stateAPI.toggle();

// Controlar foco
stateAPI.focus();

// Habilitar/Desabilitar
stateAPI.enable();
stateAPI.disable();

// Verificar estado
const isOpen = stateAPI.isOpen();

Complete API Summary

Method Description
val(value?) Get/set value by ID
select(id) Selects item by ID
unselect(id) Removes selection (multi-select)
getSelected() Gets complete selected item(s)
clear() Clears selection
data(data?) Get/set all data
addOption(option) Adds option dynamically
removeOption(id) Removes option by ID
open() Opens dropdown
close() Closes dropdown
toggle() Toggles open/closed
focus() Focuses on select
enable() / disable() Enables/disables
isOpen() Checks if open
destroy() Destroys the instance