Press "Enter" to skip to content

An Advanced Selection Box Optimization Library | pureScriptSelect

Pure Script Select is a powerful, easy-to-use JavaScript library used to beautify and enhance single or multiple select boxes.

Features:

  • A custom image or icon for each option
  • Works with original selection element.
  • Select multiple options just like inserting tags.
  • Live search.

How to make use of it:

1. Load the pureScriptSelect’s JavaScript and CSS information within the HTML file.

<link rel=”stylesheet” href=”style.css” />
<script src=”script.js”></script>

2. Add customized photographs to the choose choices.

<div class="directorist-select" id="selectImg">
  <select name="" >
    <option value="">Select Item</option>
    <option img='1.svg' value="alom">Alom</option>
    <option img='2.png' value="basir">Basir</option>
    <option img='3.svg' value="asad">Asad</option>
    <option img='4.svg' value="barek">Barek</option>
  </select>
</div>
pureScriptSelect('#selectImg');

3. Or add customized icons (Font Awesome on this instance) to the choose choices.

<div class="directorist-select" id="selectIcon">
  <select name="" >
    <option value="">Select Item</option>
    <option icon="fas fa-check" value="alom">Alom</option>
    <option icon="fas fa-check" value="basir">Basir</option>
    <option icon="fas fa-check" value="asad">Asad</option>
    <option icon="fas fa-check" value="barek">Barek</option>
  </select>
</div>
pureScriptSelect('#selectIcon');

4. Add a search field to the choice that permits the customer to filter via the choices.

<div class="directorist-select" id="selectIcon" data-isSearch="true">
  <select name="" >
    <option value="">Select Item</option>
    <option icon="fas fa-check" value="alom">Alom</option>
    <option icon="fas fa-check" value="basir">Basir</option>
    <option icon="fas fa-check" value="asad">Asad</option>
    <option icon="fas fa-check" value="barek">Barek</option>
  </select>
</div>

5. Convert a multi-select right into a tags input.

<div class="directorist-select directorist-select-multi" id="multiSelect" data-isSearch="true" data-multiSelect='[{value: "abul", key: 0}]' data-max="5">
  <select name="mySelect" >
    <option value="">Select Item</option>
    <option value="abul">Abul</option>
    <option value="bacco">Bacco</option>
    <option value="bodri">Bodri</option>
    <option value="canmia">Canmia</option>
    <option value="choncol">Choncol</option>
    <option value="condon">Condon</option>
    <option value="chalek">Chalek</option>
    <option value="deloar">Deloar</option>
    <option value="dulon">Dulon</option>
    <option value="dipu">Dipu</option>
    <option value="dulal">Dulal</option>
  </select>
</div>
pureScriptSelect('#multiSelect');

Advanced Select Box Enhancement Library, pure Script Select Plugin/Github


See Demo And Download

Official Website(woadudakand): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.