JQuery Dropdown Select Box Plugin | Wowdown

select-dropdown-wowdown

Wowdown is turning a boring <select> tag into something beautiful. A jQuery plugin that turns regular select boxes into beautiful, animated dropdowns with tons of customization options.

nice select, jquery nice select with search, jquery select dropdown, nice select with search option, jquery nice select multiple, jquery nice select on change

How to make use of it:

1. Load the jQuery Wow down plugin’s files within the HTML doc.

<link rel="stylesheet" href="/path/to/css/wowdown.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/wowdown.min.js"></script>

2. Define the placeholder of the dropdown utilizing the data-placeholder attribute:

<select id="example" data-placeholder="Select A Language">
  <option value="jquery">jQuery</option>
  <option value="script">Script</option>
  <option value="net">.net</option>
</select>

3. Call the function wowdown on the choose component and performed.

$(function(){
  $('#example').wowdown();
});

4. Customize the looks of the dropdown utilizing the next choices.

$('#example').wowdown({
  background: "#e5e5e5",
  active_background: "#fff",
  placeholder_color: "#000",
  placeholder_active_color: "#000",
  option_color: "#000",
  vertical_padding: "15px",
  horizontal_padding: "40px",
});

5. Enable the intense mode, which signifies that the dropdown is opened in a fullscreen popup.

$('#example').wowdown({
  intense: true,
});

6. Trigger a performance every time you choose a possibility.

<select id="example" data-callback="customCallback" data-placeholder="Select A Language">
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>
function customCallback(value) {
  alert("The value selected is " + value)
}

Pretty Select Box Replacement, Wowdown Plugin/Github, pretty select dropdown, nice select npm


See Demo And Download

Official Website(dopevog): Click Here

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

Share