eidtor

v0.0.1

Published

2 years ago

ES6 select

Downloads

0High
0Medium
0Low

abdelrahman3d

Select

ES6 Select extension for Base framework

example

How to use

Install

using npm/yarn

npm install @baianat/select

yarn add @baianat/select

Include necessary files

<head>
  <!-- you should include one of the following stylesheets-->

  <!-- if you use the standalone picker -->
  <link rel="stylesheet" href="dist/css/pciker.css">

  <!-- if you use Base.framework -->
  <link rel="stylesheet" href="dist/css/base.css">
</head>
<body>
    ...
    <!-- include javaScript file -->
    <script type="text/javascript" src="dist/js/pciker.js"></script>
</body>

Create select element

There are two ways to get your Select data source, from HTML select markup or pass them as an array of values to data object.

From HTML select markup

<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>

<script>
  const newSelect1 = new Select('#select-1');
</script>

Passing values to data object

<select name="" id="select-2">

<script>
   const newSelect2 = new Select('#select-2', {
      data: [{
        text: 'Italy',
        value: 'IT'
      }, {
        text: 'USA',
        value: 'USA'
      }, {
        text: 'France',
        value: 'fr'
      }, {
        text: 'Egypt',
        value: 'EG'
      }]
    });
</script>

To enable multiple mode you can add multiple to select element

<select name="" id="select" multiple>

or set multiple to true

const newSelect = new Select('#select', {
  multiple: true
});

Settings

Methods

You can call method on Select instance.

const newSelect = new Select('#select');

newSelect.showMenu();

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme