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

Question

我有一个包含 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

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

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

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>