Press "Enter" to skip to content

A Dropdown Select Box Component | Iconic Dropdown

Iconic Dropdown is a dropdown component written in pure JavaScript – IE11 + compatible that replaces the original checkbox with a good-looking, filterable dropdown menu.

select dropdown going out of screen in mobile view, custom select option css only, custom select dropdown codepen pure css, pure css select dropdown

How to make use of it:

1. Import the minified version of the Iconic Dropdown library into the doc.

<script src="dist/dropdown.min.js"></script>

2. Initialize the Iconic Dropdown on the present choose aspect and executed.

<select id="country">
  <option value="AF">Afghanistan</option>
  <option value="AX">Ă…land Islands</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  ... more options ...
</select>
var dropdown = new IconicDropdown({
    select: "#country"
});
dropdown.init();

3. You can even define the information in an array of JS objects as follows:

var dropdown = new IconicDropdown({
    select: "#country",
    data: [
      { valueName: "GB", itemName: 'UK'}, 
      { valueName: "VU", itemName: 'Vanuatu'}, 
      { valueName: "YE", itemName: 'Yemen'}
    ],
    textField: 'itemName',
    valueField: 'valueName',
});

4. Customize the placeholder text.

var dropdown = new IconicDropdown({
    select: "#country",
    placeholder: "Select A Country"
});

5. Customize the text of the suggestion.

var dropdown = new IconicDropdown({
    select: "#country",
    noData: "No data.",
    noResults: "No results found.",
});

Minimal Select Box Replacement, Iconic Dropdown Plugin/Github, ul li dropdown select, convert select option to ul li jquery, responsive select dropdown css


See Demo And Download

Official Website(sidneywm): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *