Knockout - Filtered Dropdown

Value of first Dropdown filters second Dropdown

by Ben Clayton

HTML

<select data-bind="value: site">
<option value="Coleford">filter by site=Coleford</option>
<option value="Stockley">filter by site=Stockley</option>
<option value="Ireland">filter by site=Ireland</option>
</select>
<br/><br/>
<select data-bind="options: filter(depts,site), optionsText: 'dept', optionsValue: 'dept'">
</select>

CSS

body {
  padding: 100px;
}

select {
  width: 200px;
}

JavaScript

var viewModel = function() {
  var _self = this;
  _self.depts = ko.observableArray([
  {"site":"","dept":"[Select]"},
  {"site":"Coleford","dept":"Ambient (Coleford)"},
{"site":"Coleford","dept":"Aseptic (Coleford)"},
{"site":"Coleford","dept":"EHS (Coleford)"},
{"site":"Coleford","dept":"Engineering (Coleford)"},
{"site":"Coleford","dept":"External Supply (Coleford)"},
{"site":"Coleford","dept":"Logistics (includes Engineering) (Coleford)"},
{"site":"Coleford","dept":"Quality, Blends and Technical (Coleford)"},
{"site":"Coleford","dept":"CI Team (Coleford)"},
{"site":"Stockley","dept":"Commercial NRM (StockleyPark)"},
{"site":"Stockley","dept":"Commercial Activation (StockleyPark)"},
{"site":"Stockley","dept":"Commercial Excellence (StockleyPark)"},
{"site":"Stockley","dept":"Commercial Marketing/Category (StockleyPark)"},
{"site":"Stockley","dept":"Sales - Retail (StockleyPark)"},
{"site":"Stockley","dept":"Sales - Impulse (StockleyPark)"},
{"site":"Stockley","dept":"Sales - OOH (StockleyPark)"},
{"site":"Stockley","dept":"Sales - Field (GB)"},
{"site":"Stockley","dept":"Finance (StockleyPark/Coleford)"},
{"site":"Stockley","dept":"Marketing - Brands (StockleyPark)"},
{"site":"Stockley","dept":"Marketing - Digital TED (StockleyPark)"},
{"site":"Stockley","dept":"Marketing - Consumer Care (StockleyPark)"},
{"site":"Stockley","dept":"Marketing - Insights (StockleyPark)"},
{"site":"Stockley","dept":"Marketing - External Affairs (StockleyPark)"},
{"site":"Stockley","dept":"C S&L (StockleyPark)"},
{"site":"Stockley","dept":"Supply Chain (StockleyPark)"},
{"site":"Stockley","dept":"HR (StockleyPark/Coleford)"},
{"site":"Stockley","dept":"IT (StockleyPark/ Coleford)"},
{"site":"Stockley","dept":"Facilities Management (StockleyPark)"},
{"site":"Stockley","dept":"R&D/ ARC (StockleyPark)"},
{"site":"Stockley","dept":"Procurement (StockleyPark)"},
{"site":"Stockley","dept":"Legal (StockleyPark)"},
{"site":"Stockley","dept":"ExCom "},
{"site":"Ireland","dept":"Marketing...