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 |