ES6 Select extension for Base framework
using npm/yarn
npm install @baianat/select
yarn add @baianat/select
<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>
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.
<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>
<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
});
| Properties | Default | Description |
|---|---|---|
| data | null | generate the options values |
| multiple | false | enable/disable multiple mode |
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 |
Copyright (c) 2017 Baianat
FAQs
ES6 select
The npm package eidtor receives a total of 1 weekly downloads. As such, eidtor popularity was classified as not popular.
We found that eidtor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.