Knockout Toggle Functionality

by SamirBehara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select id="switch" data-bind="value: selectedOption">
<option value="option">Select Option...</option>
<option value="invNumber">Invoice Number </option>
<option value="subCode">Subscriber Code </option>
</select>

<br><br>

<span id="invNumber-input" data-bind="visible: selectedOption() == 'invNumber'">
<input type="text" id="invNumber" placeholder = "Invoice Number">
</span>

<span id="subCode-dropdown" data-bind="visible: selectedOption() == 'subCode'">
<select id="subCode">
<option>Select SubCode</option>
<option>AA</option>
<option>BB</option>
<option>CC</option>
</select>
</span>

JavaScript

ko.applyBindings({
  selectedOption: ko.observable()
});