Cccombo

Make select-box or combo-box by one module!

Installation

Download cccombo.js and cccombo.css files, and include them into your application.

Then initialize Cccombo like this:

document.addEventListener('DOMContentLoaded', function() {
	var cccomboArray = document.getElementsByClassName('cccombo');
	[].forEach.call(cccomboArray, function(element) {
		element.cccombo = new Cccombo(element);
		element.cccombo.init();
	});
});

Usage

Select-box

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

Combo-box

<div class="cccombo">
  <input type="text" />
  <ul>
    <li>The first option</li>
    <li>The second option</li>
    <li>The third option</li>
  </ul>
</div>

Insert the label (HTML-content) of the selected item into the custom element

Just add data-label attribute to the target element inside <button>.

<button type="button">
  <span data-label></span>
</button>

Insert the custom label of the selected item

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>

Define custom values for items

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>

Group items

Add group class to group-header elements. Group-header items become unselectable.

<ul>
  <li class="group">The first group</li>
  <li>The first option</li>
  <li>The second option</li>
  <li>The third option</li>
  <li class="group">The second group</li>
  <li>Another option</li>
  <li>One more option</li>
</ul>

Default selected item

Add selected class to the desired item:

<ul>
  <li>Now I'm not selected</li>
  <li class="selected">I'll be selected!</li>
  <li>Good luck another time</li>
</ul>

Filter the list of items

cccombo.list.filterItems(function(item, index) {
  return (
    item.element.dataset.foo > 0 &&
      item.element.dataset.bar == 'baz'
  );
});

Listen a change event

change event is dispatched to a button or input element, depends on the type of Cccombo usage.

Please note, that change event is not dispatched to the hidden input, added by Cccombo for button type of usage.

Programmatically select item

Cccombo assign the cccombo property with a Cccombo-instance value to all initialized elements. So, you can call any Cccombo functions from this property.

select() can receive a String argument (value of the desired item) or an instance of CccomboItem.

<div id="cccombo" class="cccombo">
  <button type="button"></button>
  <ul>
    <li data-value="USD">$</li>
    <li data-value="EUR">€</li>
    <li data-value="RUB">₽</li>
  </ul>
</div>

document.querySelector('#cccombo').cccombo.select('EUR');

Multiple lists in drop-down menu

<div class="cccombo">
  <button type="button"></button>

  <div class="dropdown">
    <h4>List 1</h4>

    <ul>
      <li>The first option of the List 1</li>
      <li>The second option of the List 1</li>
      <li>The third option of the List 1</li>
    </ul>

    <h4>List 2</h4>

    <ul>
      <li>The first option of the List 2</li>
      <li>The second option of the List 2</li>
      <li>The third option of the List 2</li>
    </ul>
  </div>
</div>