如果從Dropdown Knockout js中選擇了某個值，則顯示div

Question

我有一個包含特定值的下拉列表。 我在列表中有三個值。 如果我選擇第三個選項，我需要顯示一個div，它有兩個文本字段，否則隱藏它們。

這是我的代碼： -

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}.property2@Html.DropDownList("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>

如果我從下拉列表“mProperty”中選擇第3個值，我想用字段“lblNumerator”和“lblNumerator”顯示div“權重”。

我是Knockout的新手，非常感謝任何幫助。 謝謝

Answer 1

這段代碼足夠接近你的Razor-html，我覺得這個想法很清楚。

<!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>

工作插件就在這里

如果從Dropdown Knockout js中選擇了某個值，則顯示div

問題描述

1 個解決方案

解決方案1
3 已采納 2015-01-21 06:48:16

如果從Dropdown Knockout js中選擇了某個值，則顯示div

問題描述

1 個解決方案

解決方案1 3 已采納 2015-01-21 06:48:16

解決方案1
3 已采納 2015-01-21 06:48:16