---
layout: default
title:  "Select View"
---

Select View
======

`classes.SelectView` is a wrapper for the `Select.js` library.

## Simple Array Example

The SelectView can be implemented with a simple array. It will construct a Backbone Collection out of the array of values that you pass...

<div id="simple-array"></div>

~~~js
var select1 = new classes.SelectView({
    values: ["Rune","Fred","Zach","Steve"],
    helper: "Owner"
})
$('#simple-array').html(select1.render().el)

// Listen for change events
select1.on("change", function (model) {
    console.log(model)
    $('#simple-array').append(model.get('label'))
})
~~~

<script>
var select1 = new classes.SelectView({
    values: ["Rune","Fred","Zach","Steve"],
    helper: "Owner"
})
$('#simple-array').html(select1.render().el)

// Listen for change events
select1.on("change", function (model) {
    console.log(model)
    $('#simple-array').append(model.get('label'))
})
</script>

## Backbone Collection

To implement a SelectView with a Backbone Collection, you must pass both a collection and specify which attribute is to be the label.

<div id="collection-example"></div>

~~~js
var select2 = new classes.SelectView({
    collection: new Backbone.Collection([
        {first:"Rune", last:"Madsen"},
        {first:"Steve", last:"Klise"},
        {first:"Zach", last:"Schwartz"}
    ]),
    label: "first",
})
$('#collection-example').html(select2.render().el)

// Listen for changes
select2.on('change', function (model) {
    $('collection-example').append(model.get('key'))
})
~~~

You can also define a value that is different from the visible label, deactivate sorting of options and define a default option.

<div id="collection-example-b"></div>

~~~js
var select2b = new classes.SelectView({
    collection: new Backbone.Collection([
        {name:"toc", prettyname:"Table of Contents"},
        {name:"chapter", prettyname:"Chapter"},
        {name:"sect1", prettyname:"Section1"},
    ]),
    label: "prettyname",
    value: "name",
    sort: false,
    default_to: 'chapter'
})
$('#collection-example-b').html(select2b.render().el)

// Listen for changes
select2b.on('change', function (model) {
    $('collection-example-b').append(model.get('key'))
})
~~~


<script>
var select2 = new classes.SelectView({
    collection: new Backbone.Collection([
        {name:"Rune", key:"madsen"},
        {name:"Steve", key:"klise"},
        {name:"Zach", key:"schwartz"}
    ]),
    label: "name",
})
$('#collection-example').html(select2.render().el)

// Listen for changes
select2.on('change', function (model) {
    console.log(model);
    $('#collection-example').append(model.get('name'))
})

var select2b = new classes.SelectView({
    collection: new Backbone.Collection([
        {name:"toc", prettyname:"Table of Contents"},
        {name:"chapter", prettyname:"Chapter"},
        {name:"sect1", prettyname:"Section1"},
    ]),
    label: "prettyname",
    value: "name",
    sort: false,
    default: 'chapter',
})
$('#collection-example-b').html(select2b.render().el)

// Listen for changes
select2b.on('change', function (model) {
    $('#collection-example-b').append(model.get('label'))
})

</script>

## Adding a Model

Add a model to a select by using the `add_model` function and passing a Backbone Model as the only parameter. The model will be added and the list will be sorted alphabetically.

<div id="add-model"></div>

~~~javascript
var select3 = new classes.SelectView({
    values: ["Rune","Fred","Zach","Steve"],
    helper: "Owner"
})
$('#add-model').html(select3.render().el)

// Listen for change events
select3.on("change", function (model) {
    $('#simple-array').append(model.get('label'))
})

select3.add_model(new Backbone.Model({label:"Andrew"}))
~~~

<script>
var select3 = new classes.SelectView({
    values: ["Rune","Fred","Zach","Steve"],
    helper: "Owner"
})
$('#add-model').html(select3.render().el)

// Listen for change events
select3.on("change", function (model) {
    $('#simple-array').append(model.get('label'))
})

select3.add_model(new Backbone.Model({label:"Andrew"}))
</script>

## Helpers

You can also add helper text!

<div id="helper-example"></div>

~~~js
var select4 = new classes.SelectView({
    collection: new Backbone.Collection([
        {name:"Rune", key:"madsen"},
        {name:"Steve", key:"klise"},
        {name:"Zach", key:"schwartz"}
    ]),
    helper: "NAMES!",
    label: "name",
})
$('#helper-example').html(select4.render().el)
~~~

<script>
var select4 = new classes.SelectView({
    collection: new Backbone.Collection([
        {name:"Rune", key:"madsen"},
        {name:"Steve", key:"klise"},
        {name:"Zach", key:"schwartz"}
    ]),
    helper: "NAMES!",
    label: "name",
})
$('#helper-example').html(select4.render().el)
</script>