Select 2

Select

Bootstrap Select is a form control, that after the click displays a collapsible list of multiple values which can be used in forms, menus or surveys.

Contrast Bootstrap Select enables you to use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option (works for stateful select).

Select Button

image info

html

         <div
            class="select2"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>>

Disable Select Button

image info

html

         <div
            class="select2 disabled"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>
        </div>

Colored Select Button

image info

html

          <div
            class="select2 select2-primary"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>
          <div
            class="select2 select2-secondary"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>
          <div
            class="select2 select2-success"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>
          <div
            class="select2 select2-danger"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>
          <div
            class="select2 select2-warning"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>
          <div
            class="select2 select2-dark"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>

Colored Options with Hover

image info

html

         <div
            class="select2 select2-danger hoverColor"
          >
            <div id="div">
              <span class="option">
                Choose Option
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div id="options">
              <div>
                <i class="fa fa-facebook"></i>
                <span>Option 1</span>
              </div>
              <div>
                <i class="fa fa-twitter"></i>
                <span>Option 2</span>
              </div>
              <div>
                <i class="fa fa-instagram"></i>
                <span>Option 3</span>
              </div>
              <div>
                <span>Option 4</span>
              </div>
              <div>
                <span>Option 5</span>
              </div>
            </div>
          </div>

Script

    <script>
      const select = document.querySelectorAll('.select2')
      for (let i = 0; i < select.length; i++) {
        const div = select[i].querySelector('#div')
        const options = select[i].querySelector('#options')
        div.addEventListener("click", () => {
          div.classList.toggle("active")
          options.classList.toggle("display")
          select[i].classList.toggle("shadow")
        })
        const option = options.querySelectorAll('div')
        for (let i = 0; i < option.length; i++) {
          option[i].addEventListener("click", () => {
            div.querySelector("span").innerHTML= option[i].innerHTML
            console.log(option[i].innerHTML)
          })
        }
      }
    </script>

Slider

Switch