akre54/index.html

## gistfile1.js
var SelectView = Backbone.View.extend({
  el: '#my-select',

  events: {
    'change': 'addToList'
  },

  render: function() {
    this.collection.each(function(item) {
      var optionView = new OptionView({model: item});
      this.$el.append(optionView.render().$el);
    }, this);
    return this;
  },

  addToList: function(e) {
    var modelId = $(e.currentTarget).val();
    otherCollection.add(this.collection.get(modelId));
  }
});


var OptionView = Backbone.View.extend({
  tagName: 'option',

  render: function() {
    this.$el.val(this.model.id);
    this.$el.text(this.model.get('title'));
    return this;
  }
});


var CollectionView = Backbone.View.extend({
  el: '#my-list',

  initialize: function() {
    this.listenTo(this.collection, 'add', this.addOne);
  },

  addOne: function(item) {
    var itemView = new ItemView({model: item});
    this.$el.append(itemView.render().$el);
  }
});


var ItemView = Backbone.View.extend({
  tagName: 'li',

  render: function() {
    this.$el.text(this.model.get('title'));
    return this;
  }
});


// Inititalize variables
var selectItems = new Backbone.Collection([{id: 1, title: 'a'}, {id: 2, title: 'b'}, {id: 3, title: 'c'}]);
var selectView = new SelectView({collection: selectItems});
selectView.render();

var otherCollection = new Backbone.Collection();
var otherView = new CollectionView({collection: otherCollection});

## index.html
<html>
  <head>
    <title>Select / CollectionView Backbone example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>

    <style type="text/css">
      li {
        border: 1px solid black;
        background-color: #ccc;
        width: 200px;
        padding: 10px;
        margin-bottom: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <select id="my-select"></select>

    <ul id="my-list"></ul>

    <script type="text/javascript" src="./gistfile1.js"></script>
  </body>
</html>
	var SelectView = Backbone.View.extend({
	el: '#my-select',

	events: {
	'change': 'addToList'
	},

	render: function() {
	this.collection.each(function(item) {
	var optionView = new OptionView({model: item});
	this.$el.append(optionView.render().$el);
	}, this);
	return this;
	},

	addToList: function(e) {
	var modelId = $(e.currentTarget).val();
	otherCollection.add(this.collection.get(modelId));
	}
	});


	var OptionView = Backbone.View.extend({
	tagName: 'option',

	render: function() {
	this.$el.val(this.model.id);
	this.$el.text(this.model.get('title'));
	return this;
	}
	});


	var CollectionView = Backbone.View.extend({
	el: '#my-list',

	initialize: function() {
	this.listenTo(this.collection, 'add', this.addOne);
	},

	addOne: function(item) {
	var itemView = new ItemView({model: item});
	this.$el.append(itemView.render().$el);
	}
	});


	var ItemView = Backbone.View.extend({
	tagName: 'li',

	render: function() {
	this.$el.text(this.model.get('title'));
	return this;
	}
	});


	// Inititalize variables
	var selectItems = new Backbone.Collection([{id: 1, title: 'a'}, {id: 2, title: 'b'}, {id: 3, title: 'c'}]);
	var selectView = new SelectView({collection: selectItems});
	selectView.render();

	var otherCollection = new Backbone.Collection();
	var otherView = new CollectionView({collection: otherCollection});
	<html>
	<head>
	<title>Select / CollectionView Backbone example</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>

	<style type="text/css">
	li {
	border: 1px solid black;
	background-color: #ccc;
	width: 200px;
	padding: 10px;
	margin-bottom: 5px;
	list-style-type: none;
	}
	</style>
	</head>
	<body>
	<select id="my-select"></select>

	<ul id="my-list"></ul>

	<script type="text/javascript" src="./gistfile1.js"></script>
	</body>
	</html>