jQuery Plugin For Custom HTML Select Element - Gorilla Dropdown

Gorilla Dropdown is a jQuery plugin that converts the normal html <select> element into an easy-to-style dropdown list with custom images and descriptions.

How to use it:

1. Include the jQuery Gorilla Dropdown plugin's files on the web page which has jQuery JavaScript library installed.

<link rel="stylesheet" href="jquery.gorilla-dropdown.css">
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.gorilla-dropdown.js"></script>

2. Initialize the plugin on the target <select> element and done.

• data-imgsrc: image path
• data-description: more description

<select id="mySelect" class="some-class">
  <option value="saab" data-imgsrc="Saab.jpg" data-description="Description about Saab">Saab</option>
  <option value="mercedes" data-imgsrc="Mercedes.jpg" data-description="Description about Mercedes">Mercedes</option>
</select>

$("#mySelect").gorillaDropdown(Options);

3. That's it. By default, this plugin will convert the <select> element into the following (note this does not include css styling):

<div id="mySelect" class="some-class gorilla-dropdown">
  
  <div class="container">
  
    <div class="current">
      <div>Select</div>
      <span class="arrow">&#x25bc</span>
    </div>
    
    <ul class="ddlist">
      
      <li class="dditem">
        <div>
          <img class="image" src="Saab.jpg">
        </div>
        
        <div>
          <div class="text">Saab</div>
          <div class="description">Description about Saab</div>
        </div>
        
        <input class="value" value="text1" type="hidden">
        <div class="-clear-both"></div>
      </li>
      
      <li class="dditem">
        <div>
          <img class="image" src="Mercedes.jpg">
        </div>
        <div>
          <div class="text">Mercedes</div>
          <div class="description">Description about Mercedes</div>
        </div>
        <input class="value" value="text2" type="hidden">
        <div class="-clear-both"></div>
      </li>
      
    </ul>
  </div>
</div>

4. Default configuration options to customize the drop down list.

$("#mySelect").gorillaDropdown({
  arrowColor        : "#808080",
  arrowDown       : "▼",
  arrowSize       : "14px",
  arrowUp         : "▲",
  backgroundColor     : "#ffffff",
  borderColor       : "#c0c0c0",
  borderWidth       : 1,
  descriptionFontColor  : "#000000",
  descriptionFontFamily : "Verdana",
  descriptionFontSize   : "12px",
  descriptionFontStyle  : "normal",
  descriptionFontVariant  : "small-caps",
  descriptionFontWeight : "normal",
  displayArrow      : "inline",
  dropdownHeight      : "auto",
  hoverColor        : "#f0f8ff",
  imageLocation     : "left",
  onSelect        : function () {},
  padding         : 10,
  placeholder       : "Select",
  placeholderFontColor  : "#808080",
  placeholderFontFamily : "Verdana",
  placeholderFontSize   : "14px",
  placeholderFontStyle  : "italic",
  placeholderFontVariant  : "normal",
  placeholderFontWeight : "bold",
  select          : -1,
  textFontColor     : "#000000",
  textFontFamily      : "Verdana",
  textFontSize      : "14px",
  textFontStyle     : "normal",
  textFontVariant     : "normal",
  textFontWeight      : "bold",
  width         : 300
});

5. Get the selected value:

var selected = $("#mySelect").gorillaDropdown("selected");
console.log(selected);

6. Select a specific option manually.

$("#mySelect").gorillaDropdown("select", {"value": "Saab"});

---

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