JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div>
  <input type='checkbox' data-bind='checked: showAll'/> Show All Items
</div>
<div>
  <select data-bind='options: specialOptions, optionsValue: "id", optionsText: "name"'>
  </select>
</div>

JavaScript

var viewModel = function() {
	var me = this;
  
  me.showAll = ko.observable(true);
  me.allOptions = [
  	{ name: 'One', id: 1},
    { name: 'Two', id: 2},
    { name: 'Three', id: 3}
  ];
  me.specialOptions = ko.computed(function() {
  	if( me.showAll())
    	return me.allOptions;
      
    var newList = [];
    for(var i = 0 ; i<me.allOptions.length; i++)
    {
    	if( me.allOptions[i].id != 2)
      	newList.push(me.allOptions[i]);
    }
    return newList;
  });
}

var vm = new viewModel();
ko.applyBindings(vm);