eidtor

ES6 select

0.0.1
latest
npm

Version published: 7 years ago

Maintainers: 1

Created: 7 years ago

Source

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

Properties	Default	Description
data	null	generate the options values
multiple	false	enable/disable multiple mode

Methods

You can call method on Select instance.

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

newSelect.showMenu();

Method	Argument	Description
`menuShow`		show select options menu
`menuHide`		hide select options menu
`menuToggle`		toggle options menu visibility
`selectOption`	[Object] option	select option
`updateLabels`		(in multiple mode only) update the labels

License

MIT

FAQs

What is eidtor?

Is eidtor well maintained?

Package last updated on 04 Feb 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install