selectorizer v5.2.1

Do you wanna beautify your selects using pure javascript or typescript? Ok. This package was created for you. I have written the most used methods in my opinion.

Demo page: https://denoro55.github.io/selectorizer/ (native on mobiles)

Works in IE 10+

Simple example

const selects = document.querySelectorAll("select");
// const selects = document.querySelector("select"); will be the same result

selectorize(selects); // got the Controller anyway
selectorize(selects).getSelectorizers()[0]; // got the first selectorizer

implemented methods of Controller (group of Selectorizers):

• getSelectorizers
• getValues
• open
• close
• change
• addOptions
• setOptions
• refresh
• destroy

implemented methods of Selectorizer:

all methods from Controller except "getValues"

• getState
• getCurrentValue
• getElements
• getWrapper
• getSelect
• getConfig

options:

callbacks:

• beforeInit?: (select: Selectorizer) => void;
• init?: (select: Selectorizer) => void;
• beforeOpen?: (select: Selectorizer) => void;
• open?: (select: Selectorizer) => void;
• beforeClose?: (select: Selectorizer) => void;
• close?: (select: Selectorizer) => void;
• beforeChange?: (select: Selectorizer) => void;
• change?: (select: Selectorizer) => void;
• beforeRefresh?: (select: Selectorizer) => void;
• refresh?: (select: Selectorizer) => void;
• click?: (select: Selectorizer) => void;
• beforeDestroy?: (select: Selectorizer) => void;
• destroy?: (select: Selectorizer) => void;

How to use:

import "selectorizer/lib/styles/index.scss";
import { selectorize } from "selectorizer";

// node list
const selects = document.querySelectorAll("select");
selectorize(selects);

// single select
const singleSelect = document.querySelector("select");
if (singleSelect) {
  selectorize(singleSelect);
}

// Warning! If you want to reinit your selectorizer just specify second argument
const selects = document.querySelectorAll("select");

// first init
selectorize(selects);

// reinit
selectorize(selects, {
  withIcon: false,
});

// init with some options
const selects = document.querySelectorAll("select");
selectorize(selects, {
  withIcon: false,
  classes: ["my-class"],
  callbacks: {
    init: (selectorizer) => {
      const state = selectorizer.getState();
      const $elements = selectorizer.getElements();
      const $wrapper = selectorizer.getWrapper();
      const $select = selectorizer.getSelect();
      const config = selectorizer.getConfig();

      console.log(
        "init",
        selectorizer,
        state,
        $elements,
        $wrapper,
        $select,
        config
      );
    },
  },
  renderOption: (selectorizer, option) =>
    `<div class="my-awesome-option">${option.text}</div>`,
  renderLabel: (selectorizer) =>
    `<div class="my-awesome-label">${selectorizer.getCurrentValue()}</div>`,
  renderPlaceholder: (selectorizer) =>
    `<div class="my-awesome-placeholder">${selectorizer.getConfig().placeholder}</div>`,
});

// ok. let's start to do something with our selects

// *** get values of selects ***
selectorize(selects).getValues();
// [ { name: 'select-1', value: 'option 1' }, { name: 'select-2', value: 'option 1' } ]

// *** open selects ***
selectorize(selects).open();

// *** close selects ***
selectorize(selects).close();

// *** change value of selects ***
selectorize(selects).change("option 3");

// *** add new options ***
selectorize(selects).addOptions([
  { value: "new option 1", text: "new option 1" },
  { value: "new option 2", text: "new option 2" },
]);

// Warning! You can also update your native select without implemented methods, but then you must call refresh method
const $select = document.createElement("select");
const selectorizer = selectorize($select);

// append new option
const $option = document.createElement("option");
$option.value = "new value";
$option.text = "new value";
$select.appendChild(option);

// refresh selectorizer
selectorizer.refresh();

// *** set only specified options ***
selectorize(selects).setOptions([
  { value: "new option 1", text: "new option 1" },
  { value: "new option 2", text: "new option 2" },
]);

// *** destroy :( ***
selectorize(selects).destroy();