---
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([
        {name:"Rune", key:"madsen"},
        {label:"Steve", key:"klise"},
        {label:"Zach", key:"Schwartz"}
    ]),
    label: "name",
})
$('#collection-example').html(select2.render().el)

// Listen for changes
select2.on('change', function (model) {
    $('collection-example').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) {
    $('#collection-example').append(model.get('key'))
})
</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>