Question

我有一个Dropdown，其中包含2个值 - 名称和性别

如果用户在下拉列表中选择了“名称”，则会显示一个文本框（默认控件）以允许输入文本。但是，如果用户在下拉列表中选择性别，则会显示一个下拉列表，允许用户从2个值中选择 - 男性和女性。

我想使用Knockout js重写此行为。任何帮助将不胜感激。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="switch">
<option value="option">Select Option...</option>
<option value="name">Name </option>
<option value="gender">Gender </option>
</select>
<span id="name-input" style="display:none"><input type="text" id="name"></span>
<span id="gender-dropdown" style="display:none">
<select id="gender">
<option>Male</option>
<option>Female</option>
</select></span>

$("#switch").change(function () {
  switch($("#switch").val()) {
    case "name":
      $("#name-input").css("display", "inline")
      $("#gender-dropdown").css("display", "none")
      break
    case "gender":
      $("#name-input").css("display", "none")
      $("#gender-dropdown").css("display", "inline")
      break
    default:
      $("#gender-dropdown").css("display", "none")
      $("#name-input").css("display", "none")
  }
})

Answer 1

考虑在官方网站上完成所有tutorials。这些教程不会花很长时间，但它们对初学者非常有用。

您的任务可能只使用内置绑定和简单的单变量视图模型完成。

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

<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="name">Name </option>
<option value="gender">Gender </option>
</select>
<span id="name-input" data-bind="visible: selectedOption() == 'name'"><input type="text" id="name"></span>
<span id="gender-dropdown" data-bind="visible: selectedOption() == 'gender'">
<select id="gender">
<option>Male</option>
<option>Female</option>
</select></span>

切换文本框和下拉列表之间的功能

1 个答案: