Custom native HTML5 select, using data attributes and vanilla JS events which can update url search params via history API and show subsets of other custom selects. Can have reset button to pick any value or reset dependent selects. Has an ability to set default palceholder text. Click can be handled via plugin or set with special data attribute.
Great for Server or Client side rendering!!!
This is fully jQuery or other libraries independent plugin, can be fully configured with [data-attributes] or via JS constructor function.
It's always annoying and irretating when minified labrary renders it's markup and you have to debug it, if your HTML structure totally differs. One of the main advantages of this plugin is that it doesn't render any precompiled layout, you can attach this plugin to any HTML structure and configure it via data attributes or proper css classes. It acts as a separate module or web component.
In despite of the previous one this select can update url using History API and can be updated from URL parameter with the lang name. E.g. after selecting English as a language the URL will become smth like location.origin/?lang=en. The page won't be reloaded as pushState method is invoked.'
This is single select which updates history pushState, configured via data-attributes and has no dependent selects.
Differences:
has [data-selectum-picker] attribute, which generates proper css #selectum-hiding-styles that filter dependent selects subsets;
has [data-selectum-emit] attribute, here it emites countryPicked event and plugin with [data-selectum-listen="countryPicked"] will listen for this event to enable oneself and clean url parameter if necessary;
doesn't have [data-selectum-clickable] so open event will be triggered on [data-selectum] element click, i.e. plugin.
head:select.options.head||'Any other head',// Optional
items:[
{id :0, val :'apple'},
{id :1, val :'banana'},
{id :2, val :'tangerin'}
]
})
},Math.random()*2000+1000);
<asidedata-selectum="fruit"data-selectum-pickerdata-selectum-emit="fruit:chosen"data-selectum-emit-reset="sell:fruits"data-selectum-placeholder="Get your Fruit"data-selectum-head="Buy a Fruit"data-selectum-render></aside>
This will be rendered into
<asidedata-selectum="country"data-selectum-pickerdata-selectum-emit="fruit:chosen"data-selectum-emit-reset="sell:fruits"data-selectum-placeholder="Get your Fruit"data-selectum-head="Buy a Fruit"data-selectum-render></aside>
<h3class="selectum__head">Buy a Fruit</h3>
<divclass="selectum__select">
<spanclass="selectum__select__current i-arrow-bottom_after js-raw"data-selectum-current>Get your Fruit</span>
Select rendered by client with a default template:
This is the dependent select which depend on the fruit one, that can be set via [data-selectum-hiddable="fruit"] attribute or with js by passing listen: 'fruit' setting key.
Custom array of objects or string of elements should be passed to select
head:select.options.head||'Any other head',// Optional
listen:'fruit',// Optional, just for example, unnecessary here as it's duplicated via data-selectum-hiddable attribute
items:[
{
id :'0',
val :[
{id :00, val :'green'},
{id :01, val :'red'},
{id :02, val :'yellow'}
]
},
{
id :'1',
val :[
{id :10, val :'fresh'},
{id :11, val :'rotten'},
{id :12, val :'green'}
]
},
{
id :'2',
val :[
{id :20, val :'sweet'},
{id :21, val :'sour'},
{id :22, val :'mild'}
]
}
]
})
},Math.random()*2000+1000);
<asidedata-selectum="fruit"data-selectum-head="Fruit Type"data-selectum-pickeddata-selectum-listen="fruit:chosen"data-selectum-listen-reset="sell:fruits"data-selectum-placeholder="Get your Fruit"data-selectum-head="Buy a Fruit"data-selectum-renderdata-selectum-hiddable="fruit"></aside>
This will be rendered into
<asidedata-selectum="fruit"data-selectum-head="Fruit Type"data-selectum-picked=""data-selectum-listen="fruit:chosen"data-selectum-listen-reset="sell:fruits"data-selectum-placeholder="Get your Fruit"data-selectum-render=""data-selectum-hiddable="fruit"class="js-disabled">
<h3class="selectum__head">Fruit Type</h3>
<section>
<divclass="selectum__select__current i-arrow-bottom_after js-raw"data-selectum-current="">Get your Fruit</div>
<asidedata-selectum="fruit"data-selectum-head="Fruit Type"data-selectum-pickerdata-selectum-emit="fruit:chosen"data-selectum-emit-reset="sell:fruits"data-selectum-placeholder="Get your Fruit"data-selectum-head="Buy a Fruit"data-selectum-renderdata-selectum-exist>
<asidedata-selectum="stuff"data-selectum-head="Item Type"data-selectum-pickerdata-selectum-emit="stuff:chosen"data-selectum-emit-reset="sell:stuff"data-selectum-placeholder="Get your Fruit"data-selectum-head="Buy a Fruit"data-selectum-renderdata-selectum-exist="Loading stuff...'>