<p>This website requires JavaScript to deliver the best possible experience.</p>

Extension

Select

Extendsselect elementand give it more features

Basic

Getting Started

You can install modal as part of base.extensions

npm install @blexar/extensions
# or using yarn
yarn add @blexar/extensions

If you want the standalone version

npm install @blexar/select
# or using yarn
yarn add @blexar/select

Include necessary files

<head>
  <!-- if you use Base.framework -->
  <link rel="stylesheet" href="dist/css/base.css">
</head>
<body>
    <select name="" id="select-1" >

      <optgroup label="group-1">
        <option value="value-1">option-1</option>
        <option value="value-2">option-2</option>
      </optgroup>

      <optgroup label="group-2">
        <option value="value-3">option-3</option>
        <option value="value-4">option-4</option>
      </optgroup>

    </select>

    <!-- include javaScript file -->
    <script type="text/javascript" src="dist/js/select.js"></script>
    <script>
      const newSelect1 = new Select('#select-1');
    </script>
</body>

For styling options please seeSelect component.

API

PropertiesDefaultDescription
datanullgenerate the options values
multiplefalseenable/disable multiple mode
MethodArgumentDescription
menuShowshow select options menu
menuHidehide select options menu
menuToggletoggle options menu visibility
selectOption[Object] optionselect option
updateLabels(in multiple mode only) update the labels