CODEWITHSUNDEEP
javascriptjqueryhtmlcssknockout.js
iam stack
iam stack

Reputation: 97

Show div if certain value is selected from Dropdown Knockout js

I have a dropdown list with certain values. I have three values in the list. If I select the third option, I need to show a div which has two text fields else hide them.

Here is my code:-

HTML:

<div class="control-group">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="placeholder">{package}.property</label>
                            @Html.DropDownList("mProperty", new SelectList(Enum.GetNames(typeof({package}.property))), new { @class = "form-control", type = "text", id = "mProperty" })
                        </div>
                        <div id="weights" >
                            <span class="col-md-6" id="lblNumerator" >{package}[email protected]("field1", new SelectList(numerators), new { @class = "form-control numerator-dropdown", type = "text", id = "field1"  })</span><br />
                            <span class="col-md-6" id="lblDenominator">{package}.property3 @Html.DropDownList("field2", new SelectList(denominators), new { @class = "form-control", type = "text", id = "field2" })</span>
                        </div>
                        <br />
                        <br />
                        <div class="row">
                            <div class="col-md-12">
                                <label class="placeholder">Account</label>
                                @Html.DropDownList("field0", new SelectList(accounts), new { @class = "form-control allaccounts-dropdown", type = "text", id = "field0" })

                            </div>
                        </div>
                    </div>

I want to show the div "weights" with fields "lblNumerator" and "lblNumerator" if I select the 3rd value from the dropdown list "mProperty".

I am new to Knockout and really appreciate any help. Thanks

Upvotes: 1

Views: 2003

Answers (1)

sbedulin
sbedulin

Reputation: 4332

This code is close enough to your Razor-html, I think the idea would be clear.

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <select data-bind="selectedOptions: options">
      <option value="option 1" selected>Option 1</option>
      <option value="option 2">Option 2</option>
      <option value="option 3">Option 3</option>
    </select>


    <div data-bind="visible: shouldShowText">
      <h2>some hidden text</h2>
    </div>

    <hr />

    <div data-bind="text: ko.toJSON(viewModel)"></div>

    <script src="knockout.js"></script>
    <script>
      function ViewModel() {
        var availableOptions = document.querySelectorAll('option');
        availableOptions = Array.prototype.map.call(availableOptions, function(o) { return o.value; })

        var firstOption = availableOptions[0];

        this.options = ko.observableArray([firstOption]);
        this.shouldShowText = ko.computed(function() {
          var selectedOption = this.options()[0];
          return availableOptions.indexOf(selectedOption) === 2;
        }, this);
      }

      var viewModel = new ViewModel();

      ko.applyBindings(viewModel);
    </script>
  </body>

</html>

Working plunk is here

Upvotes: 3

Related Questions