Vikash Vikash - 1 year ago 75
jQuery Question

Show/Hide based on Dropdown selection in knockoutJS with model inside another model

I am working on "Rules" for form builder.

I want to show/hide text box based on the dropdown selected.

For example, let us assume we have a following "Rules" for a "TextField" control under "Form Builder"

Rule# Control(dropdown) Condition(dropdown) Value(as input textbox)

1 TextBox_1 Is filled out (Text Input NOT REQUIRED)

2 TextBox_2 Contains Hi

From the above, for Rule 1, the text input is not required and for Rule 2, Text Input is required.

The above is my scenario.

What I tried:

HTML content:

//Dropdown for "Condition"

value: selectedValue
options: ruleConditions().options(),
optionsText: 'Name',
optionsValue: 'Value',
optionsCaption: 'Choose condition'">

//Input text field for "Value"

data-bind="visible: ruleConditions().selectedValue()" />

KnockoutJS Content:

I have two view Models.

1) FormViewModel

2) TextBoxViewModel

Also, I have one array which contains
for the dropdown.

And my implementation are as follows:

//Options Available in Array

var RuleConditionArray = {

// Options for "Text Field" under Rules tab

textFieldConditions: ko.observableArray
Name: 'is filled out',
Value: 'isfilledout',
isExpressionValueRequired: false

Name: 'contains',
Value: 'contains',
isExpressionValueRequired: true

//Form View Model
function FormVM() {
var self = this;

self.textBoxVM = ko.observable(new TextBoxViewModel(Id,Name));

//TextField View Model
function TextBoxViewModel(Id, Name) {
var Txt = this;

Txt.CommonProperties = new CommonViewModel(Id, Name);

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

Txt.selectedItem = ko.observable();

Txt.selectedValue = ko.computed(function () {
return this.selectedItem() && this.selectedItem().isExpressionValueRequired
}, this);


formView = new FormVM();

What I get:

From the above code, I am able to populate the dropdown with values.

What I did not get:

I am unable to
text input field for "Rules". I need to get the value of
and show/hide "
" input text field based on this value.

I am struck with this. Kindly help me to get rid off this.

Edit - 1 : My Fiddle:

Answer Source

The problems in your code:

  • The visible binding: selectedValue is a property in TextBoxViewModel, not in RuleConditionViewModel. Therefore, visible: ruleConditions().selectedValue() should only be visible: selectedValue
  • The optionsValue: 'Value' binding tells knockout to only store the Value property of a rule condition. I.e.: it stores the string isfilledout or contains. Remove it, and the whole object is stored.
  • Because the selectedItem was a string, the computed expression this.selectedItem() && this.selectedItem().isExpressionValueRequired was always false: the string prototype does not have a property named isExpressionValueRequired.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download