JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<div class="tab-content" data-bind="with: TextBoxModel">

  <select class="form-control" data-bind="value: selectedItem, options: ruleConditions().options(), optionsText: 'Name', optionsCaption: 'Choose condition'"></select>

  <input type="text" class="form-control" data-bind="visible: selectedValue" />

</div>

JavaScript

var RuleConditionArray = {
  // Options for "Text Field" under Rules tab
  textFieldConditions: ko.observableArray([{
    Name: 'is filled out',
    Value: 'isfilledout',
    isExpressionValueRequired: false
  }, {
    Name: 'is not filled out',
    Value: 'isnotfilledout',
    isExpressionValueRequired: true
  }])
};

function RuleConditionViewModel(fieldConditions) {
  var self = this;

  self.options = ko.observableArray(ko.utils.arrayMap(fieldConditions, function(item) {
    return {

      Name: item.Name,
      Value: item.Value,
      isExpressionValueRequired: item.isExpressionValueRequired
    };
  }));

}

function TextBoxViewModel() {
  var Txt = this;

  // Initialize Rule Conditions from Array.
  Txt.ruleConditions = ko.observable(new RuleConditionViewModel(RuleConditionArray.textFieldConditions()));

  Txt.selectedItem = ko.observable();
	Txt.selectedItem.subscribe(console.log.bind(console));
  Txt.selectedValue = ko.computed(function() {
    return this.selectedItem() && this.selectedItem().isExpressionValueRequired
  }, this);
}

function FormViewModel() {
  var self = this;

  self.TextBoxModel = ko.observable(new TextBoxViewModel());

}

ko.applyBindings(new FormViewModel());