Make select-box or combo-box by one module!
Just download cccombo.js and cccombo.css files
and include in your application.
var cccomboArray = document.getElementsByClassName('cccombo');
[].forEach.call(cccomboArray, function(element) {
var cccombo = new Cccombo(element);
cccombo.init();
});<div class="cccombo">
<button type="button"></button>
<ul>
<li>The first option</li>
<li>The second option</li>
<li>The third option</li>
</ul>
</div><div class="cccombo">
<input type="text" />
<ul>
<li>The first option</li>
<li>The second option</li>
<li>The third option</li>
</ul>
</div>Just add data-label attribute to the target element inside <button>.
<button type="button">
<span data-label></span>
</button>Just add data-label attribute to the li element:
<li data-label="The first">
The first option
</li>Or to its child element with the necessary label-content (helpful for custom HTML-labels):
<li>
<span data-label><img src="icon.png" /></span> The second option
</li>Just add data-value attribute to <li> elements.
<li data-value="1">The first option</li>
<li data-value="2">The second option</li>
<li data-value="3">The third option</li>cccombo.list.filterItems(function(item, index) {
return (
item.element.dataset.foo > 0 &&
item.element.dataset.bar == 'baz'
);
});