Update form elements based on user input

by scriptstar

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>

CSS

/* Date */
.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}


/* DateTime */
.bbf-datetime select {
  width: 4em;
}


/* List */
.bbf-list .bbf-add {
  margin-top: -10px
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}


/* List.Modal */
.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

JavaScript

$(function() {
    var models = {
        "toyota": [
            {
            "modelName": "4Runner",
            "id": 250},
        {
            "modelName": "Auris",
            "id": 267},
        {
            "modelName": "Auris Hybrid",
            "id": 272},
        {
            "modelName": "Avensis",
            "id": 233},
        {
            "modelName": "AYGO",
            "id": 266},
        {
            "modelName": "Caetano",
            "id": 253},
        {
            "modelName": "Camry",
            "id": 234},
        {
            "modelName": "Carina",
            "id": 251},
        {
            "modelName": "Celica",
            "id": 238},
        {
            "modelName": "Century",
            "id": 252},
        {
            "modelName": "Corolla",
            "id": 231},
        {
            "modelName": "Corona",
            "id": 254},
        {
            "modelName": "Cressida",
            "id": 257},
        {
            "modelName": "Crown",
            "id": 258},
        {
            "modelName": "Dyna",
            "id": 244},
        {
            "modelName": "Hiace",
            "id": 242},
        {
            "modelName": "Hilux",
            "id": 243},
        {
            "modelName": "iQ",
            "id": 270},
        {
            "modelName": "Land Cruiser",
            "id": 240},
        {
            "modelName": "Land Cruiser Amazon",
            "id": 241},
        {
            "modelName": "Land Cruiser V8",
            "id": 268},
        {
            "modelName": "Landcruiser",
            "id": 255},
        {
            "modelName": "Liteace",
            "id": 256},
        {
            "modelName": "MR2",
            "id": 237},
        {
            "modelName": "Paseo",
            "id": 259},
        {
            "modelName": "Picnic",
            "id": 235},
        {
            "modelName": "Previa",
            "id": 236},
        {
            "modelName": "Prius",
  ...