在文本框和下拉菜单之间切换功能答案

【问题标题】：Toggle functionality between a textbox and dropdown在文本框和下拉菜单之间切换功能
【发布时间】：2017-08-06 14:03:20
【问题描述】：

我有一个下拉列表，其中包含 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")
  }
})

【问题讨论】：

标签： knockout.js

【解决方案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>

【讨论】：

谢谢。这有帮助。我现在正在学习教程。