Knockout.js 在文本框和下拉列表之间切换功能

我有一个下拉列表，其中包含两个值-姓名和性别

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

我想用敲除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")
  }
})

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

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

ko.applyBindings{ 选择选项：ko.observeable }; 选择选项。。。 名称 性别 男性的 女的

---

非常感谢。这很有帮助。我现在正在学习教程。