仅当从列表中选择一个特定选项时才显示相关内容

Question

现在，如果我 select 列表中的任何选项，它将显示一个输入字段，但我想将其更改为仅在 "Other" 时才显示输入字段的方式是 selected。

我该怎么做？

$(document).ready(function() {
  var viewModel = function() {
    var self = this;
    self.actions_new_location = ["Studio", "Conservation Studio", "Gallery", "Other"];
    self.actions_new_location_selected = ko.observable();
  };

  ko.applyBindings(new viewModel());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<li class="row">
  <div class="col-3">
    <label>Location of Photography</label>
  </div>
  <div class="col-3">
    <select data-bind="options: actions_new_location, value: actions_new_location_selected, optionsCaption: 'Choose...'"></select>
  </div>
</li>
<!-- to be shown only if "Other" is selected -->
<li class="row" data-bind="visible: actions_new_location_selected">
  <div class="col-3 col-offset-3">
    <label>Please describe
      <input type="text" data-bind="" />
    </label>
  </div>
</li>

Answer 1

只需检查绑定的可见性检查即可：

<li class="row" data-bind="visible: actions_new_location_selected() === 'Other'">
  <div class="col-3 col-offset-3">
    <label>Please describe
      <input type="text" data-bind="" />
    </label>
  </div>
</li>

Answer 2

让它成为一个可计算的可观察对象，这将更易于单元测试和重用。

$(document).ready(function() {
  var viewModel = function() {
    var self = this;
    self.actions_new_location = ["Studio", "Conservation Studio", "Gallery", "Other"];
    self.actions_new_location_selected = ko.observable();
    self.actions_other_selected = ko.computed(function() {
       return self.actions_new_location_selected() === "Other";
    });
  };

  ko.applyBindings(new viewModel());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<li class="row">
  <div class="col-3">
    <label>Location of Photography</label>
  </div>
  <div class="col-3">
    <select data-bind="options: actions_new_location, value: actions_new_location_selected, optionsCaption: 'Choose...'"></select>
  </div>
</li>
<!-- to be shown only if "Other" is selected -->
<li class="row" data-bind="visible: actions_other_selected">
  <div class="col-3 col-offset-3">
    <label>Please describe
      <input type="text" data-bind="" />
    </label>
  </div>
</li>

仅当从列表中选择一个特定选项时才显示相关内容

Display related content only if one particular option is selected from the list

javascript

jquery

knockout.js