---
layout: default
title:  "Dropdowns"

---

Dropdowns
======

The Dropdown is a site wide BackboneView helper using the [Chosen](http://harvesthq.github.io/chosen/) Javascript library.

<div style="float:left;"><a href="#" class="btn">Build Settings</a></div>
<div style="float:left;" id="dropdown-example-1"></div>

<div style="clear:both;"></div>

<div id="dropdown-example-2"></div>
<div id="dropdown-example-3"></div>

<script>
$(function () {
  window.dropdown = new classes.DropdownView();

  dropdown.add({model: new classes.Dropdown({'label':'first'})})
  dropdown.add({model: new classes.Dropdown({'label':'second'})})
  dropdown.add({model: new classes.Dropdown({'label':'third'})})

  $('#dropdown-example-1').append(dropdown.render().el)

  // Set the label from a different atribute, and choose a default value
  window.dropdown2 = new classes.DropdownView({'label':'title', 'default_to':'third'});

  dropdown2.add({model: new classes.Dropdown({'title':'first'})})
  dropdown2.add({model: new classes.Dropdown({'title':'second'})})
  dropdown2.add({model: new classes.Dropdown({'title':'third'})})

  $('#dropdown-example-2').append(dropdown2.render().el)

  // Add helper texts
  dropdown3 = new classes.DropdownView({'helper': 'option1'})

  dropdown3.add({model: new classes.Dropdown({'label': 'this'})})
  dropdown3.add({model: new classes.Dropdown({'label': 'that'})})

  $('#dropdown-example-3').append(dropdown3.render().el)

  // Helper Text and Multiple Selection
  dropdown4 = new classes.DropdownView({'helper':'option2', 'multiple':true})
  dropdown4.add({model: new classes.Dropdown({'label': 'the other'})})
  dropdown4.add({model: new classes.Dropdown({'label': 'that other'})})
  dropdown4.add({model: new classes.Dropdown({'label': '1'})})
  dropdown4.add({model: new classes.Dropdown({'label': '2'})})
  dropdown4.add({model: new classes.Dropdown({'label': '3'})})
  dropdown4.add({model: new classes.Dropdown({'label': '4'})})
  dropdown4.add({model: new classes.Dropdown({'label': '5'})})
  $('#dropdown-example-3').append(dropdown4.render().el)
})
</script>

~~~javascript
  window.dropdown = new classes.DropdownView();

  dropdown.add({model: new classes.Dropdown({'label':'first'})})
  dropdown.add({model: new classes.Dropdown({'label':'second'})})
  dropdown.add({model: new classes.Dropdown({'label':'third'})})

  $('#dropdown-example-1').append(dropdown.render().el)

  // Set the label from a different atribute, and choose a default value
  window.dropdown2 = new classes.DropdownView({'label':'title', 'default_to':'third'});

  dropdown2.add({model: new classes.Dropdown({'title':'first'})})
  dropdown2.add({model: new classes.Dropdown({'title':'second'})})
  dropdown2.add({model: new classes.Dropdown({'title':'third'})})

  $('#dropdown-example-2').append(dropdown2.render().el)

  // Add helper texts
  dropdown3 = new classes.DropdownView({'helper': 'option1'})

  dropdown3.add({model: new classes.Dropdown({'label': 'this'})})
  dropdown3.add({model: new classes.Dropdown({'label': 'that'})})

  $('#dropdown-example-3').append(dropdown3.render().el)

  // Helper Text and Multiple Selection
  dropdown4 = new classes.DropdownView({'helper':'option2', 'multiple':true})
  dropdown4.add({model: new classes.Dropdown({'label': 'the other'})})
  dropdown4.add({model: new classes.Dropdown({'label': 'that other'})})
  dropdown4.add({model: new classes.Dropdown({'label': '1'})})
  dropdown4.add({model: new classes.Dropdown({'label': '2'})})
  dropdown4.add({model: new classes.Dropdown({'label': '3'})})
  dropdown4.add({model: new classes.Dropdown({'label': '4'})})
  dropdown4.add({model: new classes.Dropdown({'label': '5'})})
  $('#dropdown-example-3').append(dropdown4.render().el)
~~~