Selectem – Custom select items dropdown

Selectem is a javascript plugin for custom select items dropdown.

• Lightweight 1.2kb (minified)
• No dependencies required (Plain JavaScript)
• Easy to customize
• Pretty nifty list items filter
• Preprocessor used SCSS/Compass

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="path-to/assets/css/selectem.min.css">
<script src="path-to/assets/css/selectem.min.js"></script>

2. HTML

 <div class="selectem"> 
    <span class="selectem_label">...</span>
    <div class="selectem_dropdown">
      <input class="selectem-value" name="selectemVal" type="hidden" >
      <input class="selectem-input" name="filter" autofocus type="text" autocomplete="off" data-filter >
      <ul class="selectem-items">
        <li data-val="...">
          <span class="item-avatar">
            <img src="..." alt="..." />
          </span>
          <span class="item-label">
            ...
          </span>
        </li>
      </ul>
    </div>
  </div>

3. JAVASCRIPT

Get the selected value

var selectemVal = document.querySelector('input[name="selectemVal"]');
console.log (selectemVal); // returns the selected data-val attribute from the selectem-items list