JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-bind="options: conditionOptions, value: selectedChoice, optionsText: 'text'">
</select> 
<div data-bind="visible: showSecond">
  <h3>
  If its the second option show me!!
  </h3>
</div>

JavaScript

function FilterModel() {

						this.selectedChoice = ko.observable();
        this.conditionOptions = [{ id: 0, text: 'Equals' },
        { id: 1, text: 'Less Than' },
        { id: 2, text: 'Less Than Or Equal' },
        { id: 3, text: 'Greater Than' },
        { id: 4, text: 'Greater Than Or Equal' },
        { id: 5, text: 'Between' },
        { id: 6, text: 'Contains' }
        ];


            // boolean for showing the second select
          this.showSecond = ko.computed(function () {
        return this.selectedChoice() == this.conditionOptions[5];
   }, this);
        }

        $(function () {
            ko.applyBindings(new FilterModel());
        });