Dropdowns

This dropdown is deprecated! use Select View instead.

The Dropdown is a site wide BackboneView helper using the Chosen Javascript library.

Basic Example

 
1var dropdown = new classes.DropdownView();
2
3dropdown.add({model: new classes.Dropdown({'label':'first'})})
4dropdown.add({model: new classes.Dropdown({'label':'second'})})
5dropdown.add({model: new classes.Dropdown({'label':'third'})})
6
7$('#dropdown-example-1').append(dropdown.render().el)

Setting label and value

1// Set the label from a different atribute, and choose a default value
2var dropdown2 = new classes.DropdownView();
3
4dropdown2.add({model: new classes.Dropdown({'value':'1', 'label':'first'})})
5dropdown2.add({model: new classes.Dropdown({'value':'2', 'label':'second'})})
6dropdown2.add({model: new classes.Dropdown({'value':'3', 'label':'third'})})
7
8$('#dropdown-example-2').append(dropdown2.render().el)

Setting custom label Attribute

1// Set the label from a different atribute, and choose a default value
2var dropdown3 = new classes.DropdownView({'label':'title', 'default_to':'third'});
3
4dropdown3.add({model: new classes.Dropdown({'title':'first'})})
5dropdown3.add({model: new classes.Dropdown({'title':'second'})})
6dropdown3.add({model: new classes.Dropdown({'title':'third'})})
7
8$('#dropdown-example-3').append(dropdown3.render().el)

Helper Text and Setting the Width of the Dropdown

1// Add helper texts
2// And set the width
3dropdown4 = new classes.DropdownView({'helper': 'option1', 'width':'300px'})
4
5dropdown4.add({model: new classes.Dropdown({'label': 'this'})})
6dropdown4.add({model: new classes.Dropdown({'label': 'that'})})
7
8$('#dropdown-example-4').append(dropdown4.render().el)

Multiple Selections

 1// Helper Text and Multiple Selection
 2dropdown5 = new classes.DropdownView({'multiple':true, 'width':'300px'})
 3dropdown5.add({model: new classes.Dropdown({'label': 'the other'})})
 4dropdown5.add({model: new classes.Dropdown({'label': 'that other'})})
 5dropdown5.add({model: new classes.Dropdown({'label': '1'})})
 6dropdown5.add({model: new classes.Dropdown({'label': '2'})})
 7dropdown5.add({model: new classes.Dropdown({'label': '3'})})
 8dropdown5.add({model: new classes.Dropdown({'label': '4'})})
 9dropdown5.add({model: new classes.Dropdown({'label': '5'})})
10$('#dropdown-example-5').append(dropdown5.render().el)

Custom values different from labels, defaulting to a value or label

1// Helper Text and Multiple Selection
2dropdown6 = new classes.DropdownView({ 'default_to': 2 })
3dropdown6.add({model: new classes.Dropdown({'label': 'One', 'value':'1'})})
4dropdown6.add({model: new classes.Dropdown({'label': 'Two', 'value':'2'})})
5dropdown6.add({model: new classes.Dropdown({'label': 'Three', 'value':'3'})})
6dropdown6.add({model: new classes.Dropdown({'label': 'Four', 'value':'4'})})
7dropdown6.add({model: new classes.Dropdown({'label': 'Five', 'value':'5'})})
8$('#dropdown-example-6').append(dropdown6.render().el)

Available Options

  • allow_single_deselect
  • disable_search_threshold
  • enable_split_word_search
  • group_search
  • single_backstroke_delete
  • max_selected_options
  • display_selected_options
  • display_disabled_options
  • placeholder_text
  • no_results_text
  • width