jQuery Plugin That Transforms A HTML Select Input Into A Toggleable Button

fbSelect is a lightweight jQuery plugin that turns a standard HTML select input into a fully customizable toggle button. Handles <set>, disabled <option>, <select>, multiple, null/default values.

html toggle button with text, toggle switch html, toggle switch javascript, toggle button in html

jQuery Plugin for Interactive Multi-Select & Autocomplete Dropdown Lists

How to make use of it:

1. Load the jQuery fbSelect style sheet in the header section.

<link rel="stylesheet" href="jquery.fbs.min.css">

2. Download the latest version of the jQuery library and jQuery fbSelect script at the bottom of the webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.fbs.js"></script>

3. Enter a normal selection element in your text.

  I'm good at 
  <select id="demo" name="demo" title="demo">
    <option value="1">jQuery</option>
    <option value="2">JavaScript</option>
    <option value="3">Html5</option>
    <option value="4">CSS3</option>
    <option value="4">Photoshop</option>

3. Call the function on the selection.


4. Default settings.

// CSS class name of created <span> that replaces <select>.
spanClass: "fbs",

// array of CSS class names to be toggled between each click on <span>.
spanClasses: ['fbs1','fbs2','fbs3','fbs4'],

// set true to skip <option> with none/ blank values.
skipNoValue: false

jQuery Plugin For Toggleable Inline Select Input, fbSelect Github

See Demo And Download

Official Website(fatbattk): Click Here

This superior jQuery/javascript plugin is developed by fatbattk. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…