Mobile-friendly Dropdown Select Plugin With jQuery - sth-select

File Size: 164 KB
Views Total: 2997
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-friendly Dropdown Select Plugin With jQuery - sth-select

sth-select is a jQuery based mobile-friendly select replacement that enables the user to select the option from a popup sliding from the bottom of the window when triggered.


# Yarn
$ yarn add sth-select

$ npm install sth-select --save

How to use it:

1. Put jQuery library together with the jQuery sth-select plugin's JavaScript and CSS files in the html file.

<link rel="stylesheet" href="sth-select.css">
<script src="//"></script>
<script src="src/sth-select.js"></script>

2. Config the plugin by adding the following attributes to your select element:

  sth-select-title="Select a person:"
  sth-select-placeholder="No person select"
  <option value="1">Stanley</option>
  <option value="2">Isabella</option>
  <option value="3">Luiz</option>
  <option value="4">Reubert</option>
  <option value="5">Pedro</option>

3. Style the background overlay when the select popup is opened.

.sth-overlay {
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .6);
  display: none;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  width: 100%;

Change log:


  • Fixed conflicts one more time


  • Added close button to the popup's title


  • Fixing conflicts


  • Fixed bug with selects with no filter being filtered

This awesome jQuery plugin is developed by StanleySathler. For more Advanced Usages, please check the demo page or visit the official website.